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


    模态框(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">&times;</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 时则按键无效。

  • 相关阅读:
    ==与===的区别判断
    javascript中new操作符
    javascript中toString和valueOf方法的区别
    数据库索引
    QVegas-一个升级版的TCP Vegas拥塞算法
    海量数据解决方式,知多少?
    最通俗易懂的网络应用层协议具体解释
    Android视图注入库:butterknife
    POJ 3210 : Coins
    ES6的新特性-让前后端差异越来越小
  • 原文地址:https://www.cnblogs.com/tnnyang/p/4610060.html
Copyright © 2020-2023  润新知