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 相关文章推荐
jquery绑定原理 简单解析与实现代码分享
Sep 06 Javascript
js简单的弹出框有关闭按钮
May 05 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 Javascript
javascript实现数据双向绑定的三种方式小结
Mar 09 Javascript
js如何编写简单的ajax方法库
Aug 02 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
Vue中使用clipboard实现复制功能
Sep 05 Javascript
微信小程序实现的一键连接wifi功能示例
Apr 24 Javascript
JS用最简单的方法实现四舍五入
Aug 27 Javascript
vue实现计算器功能
Feb 22 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
MySql中正则表达式的使用方法描述
2008/07/30 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
基于jquery封装的一个js分页
2011/11/15 Javascript
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
vue组件实现进度条效果
2018/06/06 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
python 布尔操作实现代码
2013/03/23 Python
python连接mysql并提交mysql事务示例
2014/03/05 Python
Python3里的super()和__class__使用介绍
2015/04/23 Python
浅谈python中的正则表达式(re模块)
2017/10/17 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
Python如何调用外部系统命令
2019/08/07 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
学习决心书
2014/03/11 职场文书
英语四级考试作弊检讨书
2014/09/29 职场文书
秋菊打官司观后感
2015/06/03 职场文书
2015年小学重阳节活动总结
2015/07/29 职场文书
Javascript之datagrid查询详解
2021/09/15 Javascript
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
Python编程中内置的NotImplemented类型的用法
2022/03/23 Python