twitter-bootstrap – bootstrap模式不阻止下面的内容

我使用bootstrap来显示一个简单的模态窗口,由于某种原因虽然模态没有阻止它下面的任何内容,所以我仍然可以点击,写入并做我想做的任何事情,即使模态显示.任何人都知道如何更改它,以便它实际上阻止所有其他内容？
这就是这个例子的所有代码(没有js文件或没有)：

<html>
<head>

    <link href="lib/bootstrap-2.3.2/css/bootstrap.css" rel="stylesheet" />
    <script src="lib/jquery-2.0.3/jquery.js"></script>
    <script src="lib/bootstrap-2.3.2/js/bootstrap.js"></script>

</head>
<body>

<div class="content" >

    <div class="modal" >
        <div class="modal-header">
            <h3>Example title</h3>
        </div>
        <div class="modal-body">example text</div>
        <div class="modal-footer">
            <button class="btn">No</button>
            <button class="btn">Yes</button>
        </div>
    </div>

    <!-- my form with fields etc is here -->
    <label>Example field</label><input type="text"></input>

</div>

</body>
</html>

结果如下：

我有bootstrap css和js文件,给出下面的例子我仍然可以看到文本框甚至是模态显示…

解决方法

先前版本的2.3.2被打破了..

我建议你升级到Bootstrap 3并使用：

<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" />

或者您可以使用Bootstrap CDN：

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
 <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

和Modal Code

twitter-bootstrap – bootstrap模式不阻止下面的内容

解决方法

相关文章