html - 禁止 Bootstrap 模式在单击屏幕上的任意位置时关闭

标签 html css twitter-bootstrap twitter-bootstrap-3

我有一个文本,点击它会显示一个模态窗口 -

<div data-toggle="modal" data-target="#modalid">Open</div>

<div class="modal fade" id="modalid" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        </div>
        <div class="modal-body" style="background-color: #F0F0F0">
        Content
        </div>
   </div>
</div>
</div>

我已使用 data-backdrop="static" 来防止通过单击屏幕上的任意位置关闭窗口,但它不起作用。窗口仍在关闭。 (注意:另一个属性 data-keyboard="false" 工作正常)

还有一件事,我看到这个类总是附加到 html,就在 div class="modal-dialog" 行之上-

<div class="modal-backdrop fade in"></div>

这是导致问题的原因吗?如何解决?

提前致谢。

最佳答案

只是为了证明您的代码已经按要求工作,这里是一个可运行的代码段:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<div data-toggle="modal" data-target="#modalid">Open</div>

  
<div class="modal fade" id="modalid" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        </div>
        <div class="modal-body" style="background-color: #F0F0F0">
        Content
        </div>
    </div>
</div>

关于html - 禁止 Bootstrap 模式在单击屏幕上的任意位置时关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28322867/

相关文章:

javascript - 在导航菜单中添加一个向下滑动的搜索框

php - 该表单没有收集用户输入,即使我输入了有效的表和列,查询也无法正常工作

html - 透明导航栏css

php - 组织 Div 的 css 框模型

css - yiistrap TbNav 按钮样式

html - 具有内联 block 子项的 div 与相同的 CSS 显示不一致

javascript - 如何使用 CSS 剪辑路径剪辑 Canvas ?

css - 使用 Angular Material 进行布局时未按应有的方式响应

html - 将父样式应用于框架中的页面

html - Bootstrap Z-index 图像不工作