BootStrap 模态框禁用空白处点击关闭

港控/mmm° 2022-05-08 14:54 243阅读 0赞

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。bootstrap的模态框在默认情况下，点击其他空白区域（通常是遮罩层），模态框会被关闭，那么以下方法就是禁止点击其他区域关闭模态框。

$('\#myModal').modal(\{backdrop: 'static', keyboard: false\});

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

keyboard:false时,esc键盘不关闭.

上述代码也用于打开模态框。

也可以使用以下方法：

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
      <div class="modal-dialog custom-dialog succ-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4>提示信息</h4>
          </div>
          <div class="modal-body">
            <div><img src="images/loading.gif"><p><span>投标成功！</span><img src="images/success.png"></p></div>
          </div>      
        </div>
      </div>
    </div>

这里的data-backdrop="static"指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。而data-keyboard是指当按下 escape 键时关闭模态框，设置为 false 时则按键无效。

发表评论取消回复

表情：

评论列表（有 0 条评论，243人围观）

还没有评论，来说两句吧...

相关阅读

相关 bootstrap点击遮罩不关闭模态框

![在这里插入图片描述][20210114145202520.png] backdrop: 'static' //遮罩不关闭 keyboard:

雨点打透心脏的1/2处/ 2023年01月06日 11:47/ 0 赞/ 182 阅读

相关 bootstrap 禁用 modal 点击空白处关闭事件

在使用bootstrap的 modal 时候，会遇到在弹出的modal 后，点击空白处时 modal也关闭了，怎么禁用空白关闭事件呢一般使用： $('\modal\_

ゝ一世哀愁。/ 2022年08月01日 13:38/ 0 赞/ 331 阅读

相关 BootStrap 模态框禁用ESC关闭、禁用点击空白处关闭

<div id="AddProjectModel" class="modal inmodal" tabind

柔光的暖阳◎/ 2022年06月14日 06:36/ 0 赞/ 382 阅读

相关模态框点击空白处不消失

代码： <div class="modal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="s

- 日理万妓/ 2022年06月02日 03:39/ 0 赞/ 318 阅读

相关 BootStrap 模态框禁用空白处点击关闭

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。bootstrap的模态框

港控/mmm°/ 2022年05月08日 14:54/ 0 赞/ 244 阅读

相关 BootStrap 模态框禁用空白处点击关闭

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。bootstrap的模态框

电玩女神/ 2022年05月07日 09:34/ 0 赞/ 358 阅读

相关 bootstrap模态框，使点击空白地方模态框不消失

正常情况下  <div class="modal fade" id="myModal" tabindex="-1" role="d

末蓝、/ 2022年03月16日 08:36/ 2 赞/ 838 阅读

相关 bootstrap--模态框

复制即可运行. 小模态框 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c

╰半橙微兮°/ 2022年02月21日 07:47/ 0 赞/ 440 阅读

相关 bootstrap模态框-单击模态框之外不关闭

在模态框标签添加如下标签：data-backdrop="static" data-keyboard="false"  <div cl

系统管理员/ 2022年02月03日 12:17/ 0 赞/ 423 阅读

相关 bootstrap 模态框禁用点击空白处消失和禁用按ESC消失

方法一： JS控制的方式 $('myModal').modal({ backdrop: 'static', //禁用点击空白处消失 keyboard

绝地灬酷狼/ 2021年12月09日 05:47/ 0 赞/ 415 阅读