Menu
I'm having a bit of an odd problem with Twitter Bootstrap and the non-JS examples of modal, what happens is that the modal background appears (greys) but the window does not.
I've found if I remove the "hide" class from the modal windows div, it will load but not correctly.
The Fiddle is 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's 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 has come from this tutorial on Bootstraps website http://getbootstrap.com/2.3.2/javascript.html#modals
213
The key idea is to have pointer-events: none; for the body when modal is open. But the specific elements you want to be interacted with should have e.g. pointer-events: auto; . In the example you can click both buttons when dialog is hidden, but only Toggle Dialog button when dialog is shown.
To open another modal in modal with Bootstrap, we can set the z-index of the modals. to add the modals. so the 2nd modal will show on top of the first one.
Modals are built with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead. Clicking on the modal “backdrop” will automatically close the modal. Bootstrap only supports one modal window at a time.
Modal Size Change the size of the modal by adding the . modal-sm class for small modals (max-width 300px), . modal-lg class for large modals (max-width 800px), or . modal-xl for extra large modals (max-width 1140px).
You're referencing the Bootstrap version 3 css but using the version 2 example code.
Try using the version 3 example code.
173
I had a similar issue and was able to resolve it by moving the modal to the top of the page. After doing that both the background and the modal window appeared. Took me about 4 hours of research to figure it out so I hope this helps someone else!
4
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
