bootstrap 弹出框点击其他区域时弹出框不消失选项设置
默认情况下,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 弹出框点击其他区域时弹出框不消失选项设置的更多相关文章
- js的事件冒泡和点击其他区域隐藏弹出层
一.前言 在编写页面的时候,我们经常使用到弹出层.对于弹出层,原本的意义就是增加与用户的交互,提升用户的好感度.如果弹出层都没有较好的体验,那何谈通过交互来提升好感... 首先提出几个弹出层的注意点: ...
- 微信6.7.4 ios12 软键盘收回时页面不回弹,导致光标位置错乱,再次点击输入框区域时无法focus
https://developers.weixin.qq.com/community/develop/doc/00044ae90742f8c82fb78fcae56800 https://blog.c ...
- js中点击空白区域时文本框与隐藏层的问题
当文本框获得焦点的时候,在文本框的下方显示一个浮动层. 当用户点击除了文本框和浮动层以外的网页空白处时,要隐藏浮动层. 当用户点击浮动层时,改变文本框的值. <!DOCTYPE html PUB ...
- Android popupwindow 失去焦点或者点击空白区域时消失的解决方法
先来看下Android API 的这个Methods: public void setOutsideTouchable (boolean touchable) Controls whether the ...
- bootstrap下使用模态框,在模态框内输入框中回车时,模态框自动关闭的问题及解决方法
使用bootstrap下模态框,构建表单提交页面,但是输入框中直接回车,本来是想执行一下验证,但是却导致模态框自动关闭了. 遇到这样的问题,只需要先禁止回车触发表单提交 $(do ...
- 表单中的input框点击enter到下一个input框
$(function() { $("#form1").on("keydown", "tr input", function() { //响应 ...
- Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭。
目标: Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭. 参考:http://v3.bootcss.com/javascript/#dropdowns / ...
- jq自定义下拉菜单,在点击非当前下拉菜单区域时,关闭下拉菜单(点击事件的对象不是目标元素本身)
jq自定义下拉菜单,在点击非当前下拉菜单区域时,关闭下拉菜单(点击事件的对象不是目标元素本身) //点击非当前下拉菜单区域时,关闭下拉菜单 $(document).mousedown(function ...
- Bootstrap使用模态框modal实现表单提交弹出框
Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...
随机推荐
- Ubuntu12.04 安装PyCharm
1. 下载 选择Linux Tab,选择下载免费的Community Edition[1].当前版本是3.4 2. 安装PyCharm 按照官网给出的安装指导[2]进行安装. (1) Copy the ...
- A little problem for pt-pmp
https://bugs.launchpad.net/percona-toolkit/+bug/1320168 We use the pt-pmp (a variety for pmp !http:/ ...
- android自定义RadioGroup实现可以添加多种布局
android自带的RadioGroup是继承自LinearLayout,如果布局的时候不是直接写radiobutton,即radiobutton外面还包了一层容器,这时分组是不成功的,因为查找不到r ...
- ORACLE自定义顺序排序-转
ORACLE可以借助DECODE函数,自定义顺序排序: select * from ( select 'Nick' as item from dual union all select 'Viki' ...
- Eclipse中如何修改SVN的地址
在SVN服务端的IP更改后,客户端SVN的连接地址可以在Eclipse中进行修改,方法如下: 首先:在Eclipse中选择Windows-> Show View->others 就会出现[ ...
- 如何在终端实时展现git分支
在微博上看到ghosTM55在终端可以实时展现出当前运行的分支,觉得很奇特,于是google了一把.这里面存在两个内容,第一个bash,第二个是git bash基础: 了解到linux的shell存在 ...
- ios 数组排序
第一种:利用数组的sortedArrayUsingComparator调用 NSComparator 示例: obj1和obj2指的是数组中的对象 //1.数组中存放的是字符 NSComparato ...
- 转载 jQuery的三种$()
$号是jQuery“类”的一个别称,$()构造了一个jQuery对象.所以,“$()”可以叫做jQuery的构造函数(个人观点,呵呵!). 1.$()可以是$(expresion),即css选择器 ...
- [Android Studio 权威教程]断点调试和高级调试
好了开始写一个简单的调试程序,我们先来一个for循环 ? 1 2 3 4 5 6 7 8 <code class="language-java hljs ">for ( ...
- mysql ODBC connector相关问题
mysql ODBC connector我安装了,怎么就不成功了 进到命令行,运行下边的:C:\>cd \windows\SysWOW64 C:\Windows\SysWOW64>odbc ...