John Moss John Moss - 1 year ago 64
jQuery Question

Twitter Bootstrap Modal - Grey background but no window

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:

<!DOCTYPE html>
<html lang="en">
<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">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//">

<!-- Optional theme -->
<link rel="stylesheet" href="//">

<!-- 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>
<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 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 class="modal-body">
<p>Fields for the signatures here, take some from the facebook API</p>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Sign Now!</button>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//"></script>
<!-- Bootstrap core JavaScript
================================================== -->
<script src="//"></script>

The code has come from this tutorial on Bootstraps website

Answer Source

You're referencing the Bootstrap version 3 css but using the version 2 example code.

Try using the version 3 example code.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download