默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可能会带来很不好的体验效果,所以,我们会希望不会发生这种情况,事实上bootstrap dialog提供了大量的选项可以设置各种dialog的行为和效果。如下所示:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="">
<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 class="modal-title" id="myModalLabel">新增</h4>
</div>
<div class="modal-body">
            </div>
<div class="modal-footer">
<button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
</div>
</div>
</div>
</div>
$("#add").click(function () {
$("#myModalLabel").text("新增");
$('#myModal').modal({backdrop:"static"}); --设置为static后可以防止不小心点击其他区域是弹出框消失
});
其他更多选项可见http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

bootstrap 弹出框点击其他区域时弹出框不消失选项设置的更多相关文章

  1. js的事件冒泡和点击其他区域隐藏弹出层

    一.前言 在编写页面的时候,我们经常使用到弹出层.对于弹出层,原本的意义就是增加与用户的交互,提升用户的好感度.如果弹出层都没有较好的体验,那何谈通过交互来提升好感... 首先提出几个弹出层的注意点: ...

  2. 微信6.7.4 ios12 软键盘收回时页面不回弹,导致光标位置错乱,再次点击输入框区域时无法focus

    https://developers.weixin.qq.com/community/develop/doc/00044ae90742f8c82fb78fcae56800 https://blog.c ...

  3. js中点击空白区域时文本框与隐藏层的问题

    当文本框获得焦点的时候,在文本框的下方显示一个浮动层. 当用户点击除了文本框和浮动层以外的网页空白处时,要隐藏浮动层. 当用户点击浮动层时,改变文本框的值. <!DOCTYPE html PUB ...

  4. Android popupwindow 失去焦点或者点击空白区域时消失的解决方法

    先来看下Android API 的这个Methods: public void setOutsideTouchable (boolean touchable) Controls whether the ...

  5. bootstrap下使用模态框,在模态框内输入框中回车时,模态框自动关闭的问题及解决方法

    使用bootstrap下模态框,构建表单提交页面,但是输入框中直接回车,本来是想执行一下验证,但是却导致模态框自动关闭了. 遇到这样的问题,只需要先禁止回车触发表单提交            $(do ...

  6. 表单中的input框点击enter到下一个input框

    $(function() { $("#form1").on("keydown", "tr input", function() { //响应 ...

  7. Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭。

    目标: Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭. 参考:http://v3.bootcss.com/javascript/#dropdowns    / ...

  8. jq自定义下拉菜单,在点击非当前下拉菜单区域时,关闭下拉菜单(点击事件的对象不是目标元素本身)

    jq自定义下拉菜单,在点击非当前下拉菜单区域时,关闭下拉菜单(点击事件的对象不是目标元素本身) //点击非当前下拉菜单区域时,关闭下拉菜单 $(document).mousedown(function ...

  9. Bootstrap使用模态框modal实现表单提交弹出框

    Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...

随机推荐

  1. Ubuntu12.04 安装PyCharm

    1. 下载 选择Linux Tab,选择下载免费的Community Edition[1].当前版本是3.4 2. 安装PyCharm 按照官网给出的安装指导[2]进行安装. (1) Copy the ...

  2. A little problem for pt-pmp

    https://bugs.launchpad.net/percona-toolkit/+bug/1320168 We use the pt-pmp (a variety for pmp !http:/ ...

  3. android自定义RadioGroup实现可以添加多种布局

    android自带的RadioGroup是继承自LinearLayout,如果布局的时候不是直接写radiobutton,即radiobutton外面还包了一层容器,这时分组是不成功的,因为查找不到r ...

  4. ORACLE自定义顺序排序-转

    ORACLE可以借助DECODE函数,自定义顺序排序: select * from ( select 'Nick' as item from dual union all select 'Viki' ...

  5. Eclipse中如何修改SVN的地址

    在SVN服务端的IP更改后,客户端SVN的连接地址可以在Eclipse中进行修改,方法如下: 首先:在Eclipse中选择Windows-> Show View->others 就会出现[ ...

  6. 如何在终端实时展现git分支

    在微博上看到ghosTM55在终端可以实时展现出当前运行的分支,觉得很奇特,于是google了一把.这里面存在两个内容,第一个bash,第二个是git bash基础: 了解到linux的shell存在 ...

  7. ios 数组排序

    第一种:利用数组的sortedArrayUsingComparator调用 NSComparator  示例: obj1和obj2指的是数组中的对象 //1.数组中存放的是字符 NSComparato ...

  8. 转载 jQuery的三种$()

    $号是jQuery“类”的一个别称,$()构造了一个jQuery对象.所以,“$()”可以叫做jQuery的构造函数(个人观点,呵呵!).   1.$()可以是$(expresion),即css选择器 ...

  9. [Android Studio 权威教程]断点调试和高级调试

    好了开始写一个简单的调试程序,我们先来一个for循环 ? 1 2 3 4 5 6 7 8 <code class="language-java hljs ">for ( ...

  10. mysql ODBC connector相关问题

    mysql ODBC connector我安装了,怎么就不成功了 进到命令行,运行下边的:C:\>cd \windows\SysWOW64 C:\Windows\SysWOW64>odbc ...