【bootstrap】modal模态框的几种打开方法+问题集锦
第一部分:
关于bootstrap中modal的使用,下面把几种自己用的打开方法展示出来
首先呢,得有个Bootstrap的页面,这里就不说了。
其次呢,得有个modal放在页面中,不管你这段代码加在页面代码的什么地方,默认是不会显示出来的
<div class="modal fade modalIndex" id="adminModal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">机构筛选</h4>
</div>
<div class="modal-body">
机构信息 </div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">确认</button>
</div>
</div>
</div>
</div>
最后呢,就是下面的几种打开方式:
第一种打开方式:
在某个绑定的元素上添加下面两个属性【例如在button或者a标签上】
<a data-toggle="modal" data-target="#adminModal">机构</a>
只要target指向的id正确,就可以成功打开modal框。
第二种打开方式:
给某个绑定的元素添加class,【l例如在button或者a标签上】
<a class="adminA">机构</a>
然后写js为它添加点击事件:
$(".adminA").click(function(){
$('#adminModal').modal("show");
});
第二部分:
使用过程中出现的一些问题集锦
问题1:打开的Modal模态框位于页面上图层div的下面
解决方法:
为Modal指定z-index,即可解决
.modalIndex{
z-index:;
}
然后为modal加上这个class即可。
=======================================================
问题2:
怎么关闭modal?
解决方法:
$('#adminModal').modal('hide');
=======================================================
【bootstrap】modal模态框的几种打开方法+问题集锦的更多相关文章
- 重置 Bootstrap modal 模态框数据
利用 Bootstrap modal 模态框弹层添加或编辑数据,第二次弹出模态框时总是记住上一次的数据值,stackoverflow 上找到个比较好的方法,就是利用 jQuery 的 clone 方法 ...
- Bootstrap modal模态框关闭时,combobox input下拉框仍然保留在页面上
问题描述: 当点击模态框的关闭按钮时,下拉框中的内容没有消失,而是移动到了页面左上角 分析:这个问题的定位在于是用的哪种模态框,bootstrap和easyui都可以实现模态框,但是两个方法实现的模态 ...
- bootstrap modal模态框的运用
http://www.ziqiangxuetang.com/bootstrap/bootstrap-modal-plugin.html 方法 下面是一些可与 modal() 一起使用的有用的方法. 方 ...
- 关于【bootstrap modal 模态框弹出瞬间消失的问题】
前提是你没有重复引入bootstrap.js\bootstrap.min.js和modal.js.一下提供一个小例子. <button class="btnbtn-primary bt ...
- 修改bootstrap modal模态框的宽度
原文链接:http://blog.csdn.net/wuhawang/article/details/52252912 修改模态框的宽度很简单,修改width属性就可以了 但是要注意的一点是,修改的不 ...
- Bootstrap modal 模态框垂直居中显示补丁
<script> $.fn.modal.Constructor.prototype.adjustDialog1 = function(){ var modalIsOverflowing = ...
- bootstrap Modal 模态框垂直居中
解决 Modal 垂直居中的问题,上网找了好多博客,有好多说改源码的,这个并没有实践. 但发现另一种解决办法,可以实现,代码如下: function centerModals(){ $('.modal ...
- 设置bootstrap modal模态框的宽度和宽度
(1)修改宽度可以通过修改modal中的modal-dialog这个div宽度实现 <div class="modal-dialog" style="width:6 ...
- Bootstrap使用模态框modal实现表单提交弹出框
Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...
随机推荐
- win7 怎么进入注册表
windows图标键(就是ALT旁边的windows小旗子)+R键----输入"regedit"---回车
- 【LVS】简介与说明
一.IPVS的三种负载均衡技术 通过NAT实现虚拟服务器(VS/NAT) 客户通过Virtual IP Address(虚拟服务的IP地址)访问网络服务时,请求报文到达调度器,调度器根据连接调度算法从 ...
- Python 基础(一)
本章内容 1.编译和解释型语言的区别 2.Python的解释器 3.pyc文件 4.运行环境 5.变量 6.数据类型 7.字符编码 8.三元运算 编译和解释型语言的区别 编译器是把源程序的每一条语句都 ...
- python安装和eclipse安装及环境变量配置
非常好的技术文档,链接如下: http://jingyan.baidu.com/article/eb9f7b6da950c4869364e8f5.html 感谢作者的分享 http://python. ...
- 【bzoj1690】[Usaco2007 Dec]奶牛的旅行 分数规划+Spfa
题目描述 作为对奶牛们辛勤工作的回报,Farmer John决定带她们去附近的大城市玩一天.旅行的前夜,奶牛们在兴奋地讨论如何最好地享受这难得的闲暇. 很幸运地,奶牛们找到了一张详细的城市地图,上面标 ...
- IE8,11的iframe高度自适应
兼容模式:function iFrameHeightTzinfo() { var ifm= document.getElementById("iframe_tzinfo"); // ...
- Mysql常用语句记录
建表语句,带自增字段 create table test ( id int auto_increment primary key, name ) not null, password ) not nu ...
- poj 3708 Recurrent Function
Recurrent Function Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 1233 Accepted: 336 ...
- poj 3246 Game
Game Time Limit: 4000MS Memory Limit: 65536K Total Submissions: 2707 Accepted: 488 Description W ...
- 页面之间传值的方法asp
原文发布时间为:2008-06-02 -- 来源于本人的百度文章 [由搬家工具导入] asp.net页面间传值 今天学习中要在两个页面中传值,网上搜了一下,asp.net主要用到三个方法,前两个req ...