Bootstrap modal使用及点击外部不消失的解决方法
作者:lijiao 发布时间:2024-04-10 13:56:45
标签:Bootstrap,modal,消失
本文实例为大家分享了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使用教程》进行学习,希望大家喜欢。
0
投稿
猜你喜欢
- mysql存储引擎:MySQL服务器采用了模块化风格,各部分之间保持相对独立,尤其体现在存储架构上。存储引擎负责管理数据存储,以及MySQL
- 在所有的比例中黄金分割是最能引起人的美感的,0.618被公认为最具有审美意义的比例数字。黄金分割之所以那么普遍的流行,我猜一定跟理想女人体的
- 一、python中“::-1”代表什么?在Python中::-1表示将字符或数字倒序输出(也称【反转
- 今天做了个基于PyQt4和PySide的输入对话框.已放到PyPi中,包名wlab,大家可以使用pip安装:pip install wlab
- 目录一、== 是比较两个对象的内容是否相等二、is 比较的是两个实例对象是不是完全相同三、使用is注意python对于小整数使用对象池存储问
- pycharm from lxml import etree标红##原因:没有lxml这个包###解决方法:需要安装xlml包####下载地
- blur事件在元素失去焦点时触发。在一些jquery的教程、api手册等上面对blur事件,提供了一个错误的例子,就是关于p标签失去焦点的问
- 今天使用os.path.isdir()判断是否是文件夹的时候发现一个问题:lst = os.listdir(path) &nb
- Python中的变量作用域一般在函数体外定义的变量成为全局变量,在函数内部定义的变量称为局部变量。全局变量所有作用域都可用,局部变量只能在本
- 目录概述索引数据结构二叉树红黑树B-TreeB+TreeHash索引InnoDB 索引实现(聚集)索引文件和数据文件是分离的(非聚集)聚集索
- 具体方法:1使用panda read_excel 方法加载excel2使用concat将DataFrame列表进行拼接3然后使用pd.Exc
- pandas模块pandas是一个强大的分析结构化数据的工具集;它的使用基础是Numpy(提供高性能的矩阵运算);用于数据挖掘和数据分析,同
- 尽管甲骨文收购Sun交易尚在等待最终结果,业界对开源数据库MySQL的未来命运也十分担忧,但Sun的开发者依然在继续努力研发该开源数据库。他
- mysql 8.0.13默认有一个data文件夹,这个文件夹得删了,不然安装服务时候会有日志文件提示报错:Failed to find va
- 看书笔记db file scattered read DB ,db file sequential read DB,free buffer
- Kafka 样式的 soap 端点Christopher Dix 所开发的“Kafka — XSL SOAP 工具箱”(请参阅 参考资料)是
- iframe的防插与强插(一)中介绍了“市面上”能见到的两种防御被第三方网站iframe的方法,以及相应的变态突破方法。貌似把“受害人”逼上
- ChatGPT近期以强大的对话和信息整合能力风靡全网,可以写代码、改论文、讲故事,几乎无所不能,这让人不禁有个大胆的想法,能否用他的对话模型
- 前言Yolov5比较Yolov4,Yolov3等其他识别框架,速度快,代码结构简单,识别效率高,对硬件要求比较低。这篇博客针对Python+
- 一、前言运算符重载:为运算符定义方法所谓重载,就是赋予新的含义同一个运算符可以有不同的功能二、重载作用让自定义的实例像内建对象一样进行运算符