Question

我正在使用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>

结果如下：

result

我有bootstrap css和js文件，在下面的示例中我甚至可以看到文本框，即使模式显示...

Answer 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

Answer 2

你可以

手动添加透明背景
将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();

在这个小提琴中看到上面的内容 - ＆gt; http://jsfiddle.net/vB8xq/ 哪个btw运行 bootstrap 2.3.2 ！

Answer 3

这是在最新的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>

bootstrap模式不阻止下面的内容

3 个答案: