open modal in Bootstrap container on page load

Question

I'm using a Bootstrap modal to show a progress bar while many gallery thumbnail images preload. The modal works fine, automatically opening when the page loads and hiding when the preload is complete. However, the modal darkens the entire screen - instead I want to leave the Navbar visible and just darken everything else. I'm using shuffle.js to sort and display gallery images when clicked, and for some reason it displays the modal in the way I want, but I can't figure out why and reverse engineer a solution. Here's what I have currently:

 $(document).ready(function(){ $("#myModal").modal('show'); }); 

 <div id="myModal" class="modal"> <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span> <img class="modal-content" id="img01"> <div id="caption"></div> </div> 

Answer 1

Bootstrap uses modal-backdrop class for Modal with z-index 1040, so you can set your navbar position to Relative and it's z-index more than 1040.

.yourNavbarClass{ 
 position:relative;
 z-index:1200;
 }

Answer 2

Are you working with bootstrap 4?

Demo

 $(document).ready(function() { $("#myModal").modal('show'); }); 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <div id="myModal" class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> 

Answer 3

is This the answer you are expecting. displaying div in front even when the bootstrap model is open. by setting position fixed and z-index greater than model you would achive this. please look at the code be

This is just a example you can change the code as you want

 $(document).ready(function(){ $("#myModal").modal('show'); }); 

 #textfront{ position: fixed; z-index: 2000; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <div id="textfront"> <h1> this text will be visible even when model is shown </h1> </div> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>