Bootstrap模式使屏幕变暗，但不会显示

Question

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>

Here is where the modal loads 这是模态载荷的地方

<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>

And here is the function: 这是函数：

<script>

    function loadModal(){
        $('#myModal').modal('show');
    }

Also, if you just want to look at the whole shabang, here it is: 另外，如果您只想查看整个shabang，这里是：

<!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>

Answer 1

That is because of the hide class you gave to #myModal . 那是因为您给#myModal提供了hide类。

Here is what is seen in the code inspector: 这是在代码检查器中看到的内容：

.hide{
  display: none!important;
}

So you can remove that class from this markup: <div class="modal hide fade" id="myModal"> 因此，您可以从此标记中删除该类： <div class="modal hide fade" id="myModal">

Or use .removeClass() like this: $('#myModal').removeClass("hide").modal('show'); 或像这样使用.removeClass() ： $('#myModal').removeClass("hide").modal('show');

Bootstrap模式使屏幕变暗，但不会显示

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-02-17 21:38:53

Bootstrap模式使屏幕变暗，但不会显示

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-02-17 21:38:53

解决方案1
1 已采纳 2019-02-17 21:38:53