默认情况下,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. JS - Cookie: getCookie, setCookie

    JS function for Cookie 如果cookie未设置,判断时与空字符串‘’比较: function setCookie(cname, cvalue, exdays) { var d = ...

  2. iOS 企业证书发布app 流程

    企业发布app的 过程比app store 发布的简单多了,没那么多的要求,哈 但是整个工程的要求还是一样,比如各种像素的icon啊 命名规范啊等等. 下面是具体的流程 1.修改你的 bundle i ...

  3. 探究MaxxBass音效

    MaxxBass是什么?官方的介绍是这样的: — Patented Waves MaxxBass psycho-acoustic bassextension delivers a more natur ...

  4. Android SDK开发包国内下载地址

    不知道是因为最近kaihui还是怎么的,打开android sdk官方网站特别的慢,想下载最新版本的platform几乎变成不可能完成的任务,不知道为什么Google不像Apache那样在各国设立镜像 ...

  5. CRUD Operations In ASP.NET MVC 5 Using ADO.NET

    Background After awesome response of an published by me in the year 2013: Insert, Update, Delete In ...

  6. TFS Build Silverlight项目的两个问题

    1.The Silverlight 4 SDK is not installed. 打开对应的Build Definition,Process -> Advanced -> MSBuild ...

  7. SNF开发平台WinForm之七-单据打印和使用说明-SNF快速开发平台3.3-Spring.Net.Framework

    8.1运行效果: 8.2开发实现: 1.  先要创建.grf报表模版,指定数据列.存储位置:Reports\Template文件夹下 2.  之后在程序当中查出数据,之后把数据和打印模版 传入方法进行 ...

  8. epoll源码实现分析[整理]

    epoll用法回顾 先简单回顾下如何使用C库封装的3个epoll相关的系统调用.更详细的用法参见http://www.cnblogs.com/apprentice89/archive/2013/05/ ...

  9. c# 无法引用自己创建的类库

    今个测试一个项目,居然无法引用自己创建的类库,我很费解,然后各种测试,修改修饰符,更改强类型,各种测试,最后无聊点开类库的属性  发现居然需要引用的项目与被引用的类库的框架不一样,修改了之后就可以正常 ...

  10. TFS(Team Foundation Server)敏捷使用教程(四):工作项跟踪(1)

    工作项跟踪(1) 可跟踪性是软件过程的重要能力,TFS主要是以工作项来实现过程的可跟踪性.曾有人问:"你们实际项目里的工作项是怎么样的?能不能让我们看看?"我也一直很好奇别的公司T ...