Bootstrap modal使用及点击外部不消失的解决方法


Posted in Javascript onDecember 13, 2016

本文实例为大家分享了Bootstrap modal使用及点击外部不消失的解决方法,供大家参考,具体内容如下

1.代码:

<input id="btntext" type="button" value="添加文本组件" data-toggle="modal" data-target="#myModal" href="../SysManage/ZuJianManage.aspx"/> 
<!-- Modal --> 
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog"> 
<div class="modal-header"><button class="close" type="button" data-dismiss="modal">×</button> 
<h3 id="myModalLabel">Modal header</h3> 
</div> 
<div class="modal-body"></div> 
</div>

当然你也可以用js来控制。

如下代码:

显示:$('#myModal').modal('show');

隐藏:$('#myModal').modal('hide');

开关:$('#myModal').modal('toogle');

事件:   $('#myModal').on('hidden', function () {// do something…});

注意:我这边用到了href属性,这是让modal去 remote一个url。当然 ,你可以把你要的内容,直接写在modal-body里面。

认真看modal的div结构,你就会明白,modal-body是代表内容,modal-header是头部,那么如果要在底部加两个按钮,那么就得用下面的代码了。

<div class="modal-footer"> 
<a href="#" class="btn">关闭</a> 
<a href="#" class="btn btn-primary">保存</a> 
</div>

注意:如果要给modal设置宽度,那必须得加上布局。就是把modal放在下面的代码块中,并且设置modal的宽度。style="width:500px".对了,你还不可以用span样式直接放到class里面。

<div  class="container"></div>

如果要使弹出框点击外部不消失,在触发模态框的组件上添加以下属性 data-backdrop="static"

<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" 

<span style="font-family: arial, 宋体, sans-serif, tahoma, 'Microsoft YaHei'; font-size: 14px; line-height: 24px;">

<span style="color:#ff6666;">data-backdrop="static"</span>

</span>> 
</div>

更多内容请点击专题《Bootstrap Modal使用教程》进行学习,希望大家喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Extjs gridpanel 出现横向滚动条问题的解决方法
Jul 04 Javascript
原始的js代码和jquery对比体会
Sep 10 Javascript
使用js显示当前时间示例
Mar 02 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
JQ技术实现注册页面带有校验密码强度
Jul 27 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
jQuery Validate插件实现表单强大的验证功能
Dec 18 Javascript
js+canvas简单绘制圆圈的方法
Jan 28 Javascript
JS实现简易的图片拖拽排序实例代码
Jun 09 Javascript
inquirer.js一个用户与命令行交互的工具详解
May 18 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
Feb 10 Javascript
前端开发基础javaScript的六大作用
Aug 06 Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 #Javascript
Bootstrap3 datetimepicker控件使用实例
Dec 13 #Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
Dec 13 #Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 #Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
Dec 13 #Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 #Javascript
jQuery内存泄露解决办法
Dec 13 #Javascript
You might like
php htmlspecialchars加强版
2010/02/16 PHP
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
PHP面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
JavaScript代码复用模式实例分析
2012/12/02 Javascript
删除节点的jquery代码
2014/01/13 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
AngularJS的ng-click传参的方法
2017/06/19 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
layui弹出框Tab选项卡的示例代码
2019/09/04 Javascript
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
Js逆向实现滑动验证码图片还原的示例代码
2020/03/10 Javascript
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
python中下标和切片的使用方法解析
2019/08/27 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
怎样从/向数据文件读/写结构
2014/11/23 面试题
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
德尔福集团DELPHI的笔试题
2012/02/22 面试题
项目副经理岗位职责
2013/12/30 职场文书
安全生产投入制度
2014/01/29 职场文书
房地产开盘策划方案
2014/02/10 职场文书
招商引资工作汇报
2014/10/28 职场文书
写给女朋友的保证书
2015/05/09 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS