Question

我有一个文本，点击后应该显示一个模态窗口 -

<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>

这会导致问题吗？如何解决？

先谢谢。

Answer 1

只是为了证明您的代码已按要求运行，这里是一个可运行的代码段：

<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>

禁止在单击屏幕上的任何位置时关闭引导模式

1 个答案: