Bootstrap模式使屏幕变暗，但不会显示 [英] Bootstrap modal darkens screen but won't show
本文介绍了Bootstrap模式使屏幕变暗，但不会显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在页面加载时显示模式.问题是，屏幕变暗，但是模态本身却不显示.
I'm trying to get a modal to display upon my page loading. The problem is, the screen darkens, but the modal itself does not display.
根据网站的建议，这是我的代码的缩写版本.这是头:
As per the site's suggestion, here is an abbreviated version of my code. Here is the head:
<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');
}
此外，如果您只想查看整个shabang，这里是:
Also, if you just want to look at the whole shabang, here it is:
<!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>
推荐答案
那是因为您为#myModal提供了hide类.
That is because of the hide class you gave to #myModal.
这是在代码检查器中看到的内容:
Here is what is seen in the code inspector:
.hide{
display: none!important;
}
因此您可以从以下标记中删除该类:<div class="modal hide fade" id="myModal">
So you can remove that class from this markup: <div class="modal hide fade" id="myModal">
或使用 .removeClass() 像这样:$('#myModal').removeClass("hide").modal('show');
这篇关于Bootstrap模式使屏幕变暗，但不会显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
