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 相关文章推荐
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
window.open关于浏览器拦截问题分析及解决方法
Feb 05 Javascript
js清空form表单中的内容示例
May 20 Javascript
javascript 判断整数方法分享
Dec 16 Javascript
javascript 动态创建表格的2种方法总结
Mar 04 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
javascript删除数组元素的七个方法示例
Sep 09 Javascript
微信公众号服务器验证Token步骤图解
Dec 30 Javascript
javascript设计模式之装饰者模式
Jan 30 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 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
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
jquery中常用的SET和GET
2009/01/13 Javascript
javascript options属性集合操作代码
2009/12/28 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
Python采集腾讯新闻实例
2014/07/10 Python
Python常用正则表达式符号浅析
2014/08/13 Python
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
Python实现找出数组中第2大数字的方法示例
2018/03/26 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
将python安装信息加入注册表的示例
2019/11/20 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
详解Pycharm与anaconda安装配置指南
2020/08/25 Python
python 用Matplotlib作图中有多个Y轴
2020/11/28 Python
投标单位介绍信
2014/01/09 职场文书
房地产项目建议书
2014/03/12 职场文书
和解协议书
2014/04/16 职场文书
商场促销活动策划方案
2014/08/18 职场文书
大学生见习报告范文
2014/11/03 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
捐资助学感谢信
2015/01/21 职场文书
努力工作保证书
2015/02/28 职场文书
毕业生的自我鉴定表范文
2019/05/16 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL
python学习之panda数据分析核心支持库
2021/05/07 Python
Redis可视化客户端小结
2021/06/10 Redis