关于bootstrap 弹窗——点击空白处禁止关闭弹窗_bootstrap navbar 点击空白隐藏弹窗-优快云博客

本文链接：https://blog.youkuaiyun.com/fly_away5/article/details/51890191

本文介绍了两种防止Bootstrap弹窗在点击背景时关闭的方法。第一种是通过设置`backdrop: static`和`keyboard: false`，但可能导致刷新后弹窗自动显示。第二种是在模态框div中添加特定CSS类，实现既能阻止关闭又避免刷新后自动弹出的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于bootstrap 弹窗——点击空白处禁止关闭弹窗
点击空白处阻止弹窗关闭目前遇到两种解决方法
比如弹窗html页面代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>modal</title>
<style type="text/css">
.pa{
    position:absolute;
}
.pr{
    position:relative;
}
.modal-header .close {
    margin: -5px 3px 0px 0px;
    font-size: 32px;
    border: none;
    background-color: #fff;
    float: right;
}
.structure-indraw{
    width:150px;
    height:150px;
    text-align:center;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    border:1px solid #e8e8e8;
    cursor: pointer;
    top: 5%;
    left: 84%;
    font-size:14px;
    font-family: inherit;
}
.click-tip{
    top:40%;
}
</style>
<link href="../css/modal.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="../js/modal.js"></script>
</head>
<body>
<div class="fl structure-indraw pa" data-toggle="modal" data-target="#myModal">
    <input type="hidden" name="mol" value="">
    <input type="hidden" name="smiles" value="">
    <span class="pr click-tip in_draw_" style="width:120px;height:120px;">点击编辑结构式</span>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
       <div class="modal-dialog">
          <div class="modal-content" style="width:1000px">
             <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                      &times;
                </button>
                <span class="modal-title" id="myModalLabel">
                      结构式编辑器
                </span>
             </div>
             <div class="modal-body">
                离离原上草，一岁一枯荣。
             </div>
             <div class="modal-footer">
                <button type="button" class="btn btn-default structure-indraw-cancel" data-dismiss="modal">
                    取消
                </button>
                <button type="button" class="btn btn-primary structure-indraw-submit">
                     确定
                </button>
             </div>
          </div>
        </div>
</div>
</body>
</html>

1、通过js控制

<script type="text/javascript">
    $('#myModal').modal({backdrop: 'static', keyboard:false});
</script>

注：
backdrop:static时,空白处不关闭.

keyboard:false时,esc键盘不关闭；
但是这种方式实现的点击空白处阻止关闭模态框，当刷新页面的时候，模态框会自动显示出来，会违背当初设计的初衷。
2、在模态框的div中添加:data-backdrop="static";

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">

添加之后再点击空白的地方模态框就不会关闭了，而且刷新页面的时候模态框也不会自动弹出。