Question

我正在尝试在页面加载时显示模式。问题是，屏幕变暗，但是模态本身却不显示。

根据网站的建议，这是我的代码的缩写版本。这是头：

<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，这里是：

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

那是因为您为hide提供了#myModal类。

这是在代码检查器中看到的内容：

.hide{
  display: none!important;
}

因此您可以从以下标记中删除该类：<div class="modal hide fade" id="myModal">

或者像这样使用.removeClass()：$('#myModal').removeClass("hide").modal('show');

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

1 个答案: