Bootstrap modal darkens screen but won't show

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:

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

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

Or use .removeClass() like this: $('#myModal').removeClass("hide").modal('show');

Bootstrap modal darkens screen but won't show

Question

1 answers

solution1
1 ACCPTED 2019-02-17 21:38:53

Bootstrap modal darkens screen but won't show

Question

1 answers

solution1 1 ACCPTED 2019-02-17 21:38:53

solution1
1 ACCPTED 2019-02-17 21:38:53