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 相关文章推荐
Javascript常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
基于datagrid框架的查询
Apr 08 Javascript
对于Form表单reset方法的新认识
Mar 05 Javascript
js浏览器本地存储store.js介绍及应用
May 13 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 Javascript
深入理解vue-router之keep-alive
Aug 31 Javascript
解析Vue.js中的组件
Feb 02 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 Javascript
JS实现动态星空背景效果
Nov 01 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 Xdebug 调试扩展的安装与使用.
2010/03/13 PHP
php学习之数据类型之间的转换代码
2011/05/29 PHP
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
js有序数组的连接问题
2013/10/01 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
python 捕获shell脚本的输出结果实例
2017/01/04 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
python中树与树的表示知识点总结
2019/09/14 Python
在pycharm中实现删除bookmark
2020/02/14 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
应聘教师推荐信
2013/10/31 职场文书
应届中专生自荐书范文
2014/02/13 职场文书
建筑投标担保书
2014/05/20 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
微信小程序和php的登录实现
2021/04/01 PHP