All geek questions in one place

Twitter Bootstrap Modal - gray background, but no window

I have a slightly strange problem with Twitter Bootstrap and non-JS modal examples, what happens when the modal background appears (gray) but not in the window.

I found that if you remove the “hide” class from the modal div, it will load, but not correctly.

The Fiddle here: http://jsfiddle.net/2VbUG/1/

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content="John Moss - Stolen Bikes UK"> <title>Title</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"> <!-- Custom styles for this template --> <link href="assets/css/style.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="assets/js/html5shiv.js"></script> <script src="assets/js/respond.min.js"></script> <![endif]--> </head> <body> <div class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="col-lg-12 sign"> <a href="#myModal" role="button" class="btn btn-lg btn-danger" data-toggle="modal">Sign!</a> </div> </div> </div> <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Sign This Petition!</h3> </div> <div class="modal-body"> <p>Fields for the signatures here, take some from the facebook API</p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary">Sign Now!</button> </div> </div> <!-- jQuery (necessary for Bootstrap JavaScript plugins) --> <script src="//code.jquery.com/jquery.js"></script> <!-- Bootstrap core JavaScript ================================================== --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> </body> </html>

The code came from this lesson on the Bootstraps website http://getbootstrap.com/2.3.2/javascript.html#modals

+6
source share
6 answers

You are referring to Bootstrap version 3 of css, but using sample code of version 2.

Try using version 3 code.

+12
source

The problem is that you are loading bootstrap 3, but look at the documentation in version 2.3.2. Checkout the demo ( snippet and result ) that I did, it works great if you download the current version.

+3
source

I think you are using Bootstrap 3.0 resources for JavaScript and CSS, but using Bootstrap 2.3.2 HTML. I updated your script using bootstrap 3.0 HTML markup: http://jsfiddle.net/UWv9q/1/

 <!-- Button trigger modal --> <a data-toggle="modal" href="#myModal" class="btn btn-lg btn-danger">Sign!</a> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title">Sign this petition!</h4> </div> <div class="modal-body"> <p>Fields for the signatures here, take some from the facebook API</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Sign now!</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->
+2
source

I had a similar problem, and I was able to solve it by moving the modal file to the top of the page. After that, a background and a modal window appeared. Took me about 4 hours of research to figure it out, so I hope this helps someone else!

+2
source

I had the same problem setting the z-index of the modal window to the highest on the page fixed.

 <style> .myModalWindow{ z-index: 10;//or higher, depends on z-index of other elements on your page } </style>
0
source

All of the above answers just led me to false ends.

My problem was similar to OP, except that my problem was that my sloppy CSS was hiding / moving the modal screen.

I clicked the node button in the element viewer and disabled all CSS rules and it appeared in the middle of the screen as expected.

0
source

Source: https://habr.com/ru/post/952903/

More articles:


All Articles