我对 Twitter Bootstrap 和模态的非 JS 示例有一点奇怪的问题,发生的情况是模态背景出现(灰色)但窗口没有。
我发现如果我从模态窗口 div 中删除“隐藏”类,它会加载但不正确。
小提琴在这里: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>
代码来自 Bootstraps 网站http://getbootstrap.com/2.3.2/javascript.html#modals上的本教程