Twitter Bootstrap Modal - 灰色背景但没有窗口

Question

我在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上的本教程

Answer 1

您正在引用Bootstrap版本3 css但使用版本2示例代码.

尝试使用版本3示例代码.