引导模式不阻止下面的内容答案

【问题标题】：bootstrap modal not blocking content below引导模式不阻止下面的内容
【发布时间】：2014-02-27 01:57:25
【问题描述】：

我正在使用引导程序来显示一个简单的模态窗口，尽管模态窗口没有阻止它下面的任何内容，但我仍然可以单击、编写和做任何我想做的事情，即使模态显示。任何人都知道如何更改它以使其实际上阻止所有其他内容？
这就是这个例子的所有代码（没有 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>

结果如下：

我包含了引导 css 和 js 文件，鉴于下面的示例，即使模态显示，我仍然可以看到文本框...

【问题讨论】：

你能展示你的代码吗？
所有代码都在帖子中，在这个例子中我没有任何自定义 js 或 css。弹出窗口应始终显示并阻止输入框/标签...它确实显示但不阻止。
您可能想要使用来自this question 和这个example fiddle 的lock / onlock
@davidkonrad 感谢您指出这个问题/答案，没有意识到 2.3.2 没有包含锁定 API！

标签： twitter-bootstrap bootstrap-modal

【解决方案1】：

之前的 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

【讨论】：

2.3.2 没有/没有被破坏，它是一个稳定但旧版本；但是是的，我同意 3.1.0 更好，并且带有内置的模态锁定 API。
我下载了 2.3.1，但模态框根本不显示
-> stackoverflow.com/questions/15364543/…
对，我用那个 2.3.1 在某个地方。它确实显示和阻挡，造型有点混乱，但我想我可以从这里拿走它。谢谢。
只要你不使用remote，它在本周的 3.1.0 中被弃用了.. ！ =)

【解决方案2】：

这是在最新的 Bootstrap 中测试的。它将阻止文本字段中的输入。

<div class="content" >

<div class="modal show">
    <div class="modal-dialog">
        <div class="modal-content" >
            <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>
    </div>
</div>

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

</div>

【讨论】：

谢谢，我下载了 2.3.1 并开始工作，但样式混乱。我已按照您的建议添加了 div 结构，样式还可以。

【解决方案3】：

你可以

手动添加透明背景
将data-backdrop指定为静态
并通过代码触发模态
模态应该有role="dialog"

更改标记：

<div id="the-modal" class="modal hide" data-backdrop="static" data-keyboard="false" role="dialog">
   <div class="modal-header">
       <h3>Example title</h3>
   </div>
   ...

css：

.modal-backdrop {
   background-color: transparent;
}

脚本：

$('#the-modal').on('show', function() {
    $('body').append('<div class="modal-backdrop"></div>');
});
$('#the-modal').on('hide', function() {
    $('body').find('.modal-backdrop').remove();
});
$('#the-modal').modal();

在这个小提琴中查看以上内容 -> http://jsfiddle.net/vB8xq/ 顺便说一句运行 bootstrap 2.3.2！

【讨论】：