Bootstrap modal使用及点击外部不消失的解决方法
作者:lijiao 时间:2024-04-10 13:56:45
本文实例为大家分享了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使用教程》进行学习,希望大家喜欢。
标签:Bootstrap,modal,消失
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
一个有趣的SQL命题 用一条语句切换BIT型的真假值
2024-01-24 04:57:38
微信小程序开发常见问题及解决方案
2024-04-18 09:35:04
![](https://img.aspxhome.com/file/2023/1/136441_0s.png)
python使用pgzero进行游戏开发
2022-10-28 11:32:35
![](https://img.aspxhome.com/file/2023/1/71981_0s.png)
Python安装Graphviz 超详细图文教程
2023-02-27 16:11:18
![](https://img.aspxhome.com/file/2023/1/75891_0s.jpg)
SQL2005Express中导入ACCESS数据库的两种方法
2024-01-24 04:05:30
![](https://img.aspxhome.com/file/2023/5/106265_0s.jpg)
Pygame实战练习之飞机大战游戏
2021-01-13 13:11:25
![](https://img.aspxhome.com/file/2023/3/72723_0s.gif)
Python编程实现二叉树及七种遍历方法详解
2022-10-31 13:28:28
![](https://img.aspxhome.com/file/2023/4/76714_0s.jpg)
Python进阶_关于命名空间与作用域(详解)
2022-03-17 17:29:02
mysql中从字段中URL提取域名信息
2009-05-25 10:35:00
PHP获取当前相对于域名目录的方法
2023-08-19 18:47:31
写好Python代码的几条重要技巧
2021-09-16 21:49:47
![](https://img.aspxhome.com/file/2023/4/107454_0s.png)
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2024-04-10 13:46:11
![](https://img.aspxhome.com/file/2023/3/139693_0s.jpg)
Javascript基础教程之比较操作符
2024-04-10 16:15:05
Python-opencv实现红绿两色识别操作
2021-05-04 18:35:51
![](https://img.aspxhome.com/file/2023/2/95282_0s.jpg)
Vue如何实现组件的源码解析
2024-05-09 15:21:19
Python 正则表达式爬虫使用案例解析
2022-08-08 20:30:39
vue基于websocket实现智能聊天及吸附动画效果
2024-04-30 08:45:20
![](https://img.aspxhome.com/file/2023/1/132991_0s.gif)
从算法入手讲解SQL Server的典型示例
2008-12-18 14:51:00
PHP字符串的编码问题的详细介绍
2024-05-02 17:17:15
Python中int()函数的用法浅析
2022-08-18 09:45:12