引导模式使屏幕变暗但不会显示
Posted
技术标签:
【中文标题】引导模式使屏幕变暗但不会显示【英文标题】：Bootstrap modal darkens screen but won't show 【发布时间】：2019-07-11 05:47:26 【问题描述】：我正在尝试在我的页面加载时显示模式。问题是，屏幕变暗，但模态本身不显示。
根据网站的建议，这是我的代码的缩写版本。这是头：
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#ball
position: absolute;
left: 208px;
top: 40px;
z-index: 1;
width: 20px;
height: 20px;
transition: top 1s;
#wheel
#da_panel
position: relative;
z-index:1;
.row
padding: 20px;
</style>
</head>
这里是模态加载的地方
<body onload = "populate(); loadModal();">
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
这里是函数：
<script>
function loadModal()
$('#myModal').modal('show');
另外，如果你只想看整个沙班，这里是：
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#ball
position: absolute;
left: 208px;
top: 40px;
z-index: 1;
width: 20px;
height: 20px;
transition: top 1s;
#wheel
#da_panel
position: relative;
z-index:1;
.row
padding: 20px;
</style>
</head>
<body onload = "populate(); loadModal();">
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
<div class = "container">
<div class = "row">
<div class = "col-lg-5">
<img id = "ball" src = "ball.png" onclick="spin()"></img>
<img id = "wheel" src = "Rwheelbg.png" onclick="spin()"></img>
</div>
<div class = "col-lg-1">
<button id = "reset" onclick="reset()">Reset Wheel</button>
</div>
<div class = "col-lg-6">
<div class="well well-lg">
<span><center>Chips</center></span>
<br>
<div class = "text-center" style = "font-size: 180px;" id = "chipsInv">10</div>
<!-- Why won't this center!? -->
<br>
<span style = "float:left" id = "earnings">Your earnings:</span>
<span style = "float:right;" id ="purchase" onclick="purchase()"><a style = "color:green !important;" href = "#">$ Purchase More Chips?</a></span>
<!-- Must find way to override link color -->
</div>
</div>
<!-- Row ends here -->
<!-- FIND A WAY TO MAKE IMAGE TRANSPARENT!!! -->
</div>
<div class="panel panel-default" id = "da_panel">
<div class="panel-heading">Bet on:</div>
<div class="panel-body">
<form action="">
<input type="checkbox" name="21" value="310" id = "310"> 21<br>
<input type="checkbox" name="9" value="100" id = "100"> 9<br>
<input type="checkbox" name="14" value="120" id = "120"> 14<br>
<input type="checkbox" name="13" value="240" id = "240"> 13
</form>
</div>
</div>
<!-- <p>Bet on:</p>
<form action="">
<input type="checkbox" name="21" value="310" id = "310"> 21<br>
<input type="checkbox" name="9" value="100" id = "100"> 9<br>
<input type="checkbox" name="14" value="120" id = "120"> 14<br>
<input type="checkbox" name="13" value="240" id = "240"> 13
</form> -->
<p>Bet on up to four numbers. However, be warned, the more numbers you bet on, the lower your chip return will be.</p>
<!-- container ends here -->
</div>
<script>
function loadModal()
$('#myModal').modal('show');
var chips = 5;
var earnings = chips * (-1);
function populate()
$("#chipsInv").text(chips);
$("#earnings").text("Your earnings: " + earnings)
function purchase()
chips = chips + 1;
$("#chipsInv").text(chips);
earnings = earnings - 1;
$("#earnings").text("Your earnings: " + earnings);
function gainChips(number)
chips = chips + number;
$("#chipsInv").text(chips);
earnings = earnings + number;
$("#earnings").text("Your earnings: " + earnings);
function loseChip()
chips--;
$("#chipsInv").text(chips);
if (chips == 0)
alert("You are out of chips. Purchase more chips to continue betting.")
// 21 = 310
// 23 = 190 degrees
// 9 = 100
// 14 = 120 degrees
// 13 = 240
var randomNum = Math.floor(Math.random() * 355) + 1;
var rw=document.getElementById('wheel');
var rb = document.getElementById('ball');
function rotate(degrees)
rw.setAttribute('style', 'transition: transform 1s; transform:rotate(' + 360 + degrees + 'deg)');
console.log(degrees);
function spin()
for (i = 0; i < randomNum; i = i + 10)
console.log("2");
rotate(i);
var winningDegrees = i - 10;
console.log(winningDegrees);
function winLoss()
//some kind of array to run through.
var possBets = [310, 100, 120, 240];
var checkedBets = [];
var divisor = 0;
var winner = false;
for (i = 0; i < possBets.length; i++)
//check which boxes were checks, and pushes them to a
//checked array
if (document.getElementById(possBets[i]).checked == true)
checkedBets.push(possBets[i]);
divisor = checkedBets.length;
//now you have to ask do any of the checkBets == winningDegrees
//checks if any of the checked bets were winning bets
for (i = 0; i < checkedBets.length; i++)
if (checkedBets[i] == winningDegrees)
winner = true;
if (winner == true)
var earnings = 36/divisor;
alert("Yay! U r teh winz! You earned " + earnings + " chips.");
gainChips(earnings);
else if (divisor > 0)
alert("You lost 1 chip.")
loseChip();
//function winLoss ends here
function ballDrop()
setTimeout(function() rb.style.top = "90px";, 1050);
if (chips > 0)
setTimeout(winLoss, 2000);
ballDrop();
//end of spin function()
function reset()
rw.setAttribute('style', 'transform:rotate(0deg)');
rb.style.top = "50px";
randomNum = Math.floor(Math.random() * 355) + 1;
</script>
</body>
</html>
【问题讨论】：
【参考方案1】：这是因为你给#myModal 提供了hide 类。
这是在代码检查器中看到的内容：
.hide
display: none!important;
因此您可以从此标记中删除该类：<div class="modal hide fade" id="myModal">
或者像这样使用.removeClass()：$('#myModal').removeClass("hide").modal('show');
【讨论】：
以上是关于引导模式使屏幕变暗但不会显示的主要内容，如果未能解决你的问题，请参考以下文章