5

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

4

3 回答 3

3

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

和模式代码

于 2014-02-03T14:39:53.707 回答
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/顺便说一句运行引导程序 2.3.2！

于 2014-02-03T15:14:58.140 回答
1

这在最新的 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>
于 2014-02-03T15:08:04.597 回答