Twitter Bootstrap Modal - Grey background but no window
Question
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
6 answers
solution1
12 ACCPTED 2013-08-31 23:28:55
You're referencing the Bootstrap version 3 css but using the version 2 example code.
Try using the version 3 example code.
solution2
4 2016-11-15 15:35:50
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!
solution3
3 2013-08-31 23:34:26
solution4
2 2013-08-31 23:31:48
I think you're using the Bootstrap 3.0 JavaScript and CSS resources but using Bootstrap 2.3.2 HTML. I updated your fiddle with 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">×</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 -->
solution5
0 2017-12-02 18:21:37
All the above answers just led me down false ends.
My issue was just like the OP stated except that my problem was my sloppy CSS was hiding/moving the modal off screen.
I clicked the node in the element viewer and turned off all the CSS rules and it appeared in the middle of the screen as expected.
solution6
-1 2016-01-22 16:18:29
I've had the same issue, setting the z-index of the modal window to the highest on the page fixed it.
<style>
.myModalWindow{
z-index: 10;//or higher, depends on z-index of other elements on your page
}
</style>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.