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)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...
随机推荐
- CSS3 页面跳转的动画效果
从左侧弹出: var windowWidth = window.innerWidth; $(atlas_list).css({ "transition":"none&qu ...
- VC6.0 error LNK2001: unresolved external symbol _main解决办法
学习VC++时经常会遇到链接错误LNK2001,该错误非常讨厌,因为对于编程者来说,最好改的错误莫过于编译错误,而一般说来发生连接错误时,编译都已通过.产生连接错误的原因非常多,尤其LNK2001错误 ...
- java数据库连接池性能对比
这个测试的目的是验证当前常用数据库连接池的性能. testcase Connection conn = dataSource.getConnection(); PreparedStatement st ...
- RESTful API 设计指南【转】
网络应用程序,分为前端和后端两个部分.当前的发展趋势,就是前端设备层出不穷(手机.平板.桌面电脑.其他专用设备......). 因此,必须有一种统一的机制,方便不同的前端设备与后端进行通信.这导致AP ...
- AssetBundle系列——共享资源打包/依赖资源打包
有人在之前的博客中问我有关共享资源打包的代码,其实这一块很简单,就两个函数: BuildPipeline.PushAssetDependencies():依赖资源压栈: BuildPipeline.P ...
- codeforces Fedor and New Game
#include<iostream> #include<stack> #include<cstring> #include<cstdio> #inclu ...
- poj 3486 A Simple Problem with Integers(树状数组第三种模板改段求段)
/* 树状数组第三种模板(改段求段)不解释! 不明白的点这里:here! */ #include<iostream> #include<cstring> #include< ...
- ruby -- 问题解决(一)无法连接mysql数据库
>rails g controller home index 运行该命令时无法连接mysql 先下载配置文件:mysql-connector-c-noinstall-6.0.2-win32. ...
- Android 学习笔记之AndBase框架学习(一) 实现多功能标题栏
PS:Volley框架终于通过看源码的方式完成了所有的学习..开始学习AndBase...AndBase的源码实在是多的离谱...因此就不对所有的源码进行分析了... 学习内容: 1.使用AndBas ...
- 前端js的书写规范和高效维护的方案_自我总结使用的方案
作为程序员,人生最值得幸福的事有几件: 解决困扰了很长时间的问题 升职加薪 找个漂亮又靠谱的对象 深得领导的喜欢 带领团队冲锋陷阵 ... 哈哈,这些都是梦想,暂时想想就好了.这肯定和我说的东西不符合 ...