默认情况下,bootstrap模态框是不支持多个覆盖的,下面是一个解决办法(本人亲测),

将下面的代码复制到当前需要多个模态框的页面,问题就可以解决

$(document).on('show.bs.modal', '.modal', function(event) {
$(this).appendTo($('body'));
}).on('shown.bs.modal', '.modal.in', function(event) {
setModalsAndBackdropsOrder();
}).on('hidden.bs.modal', '.modal', function(event) {
setModalsAndBackdropsOrder();
}); function setModalsAndBackdropsOrder() {
var modalZIndex = 1040;
$('.modal.in').each(function(index) {
var $modal = $(this);
modalZIndex++;
$modal.css('zIndex', modalZIndex);
$modal.next('.modal-backdrop.in').addClass('hidden').css('zIndex', modalZIndex - 1);
});
$('.modal.in:visible:last').focus().next('.modal-backdrop.in').removeClass('hidden');
}

  

黄聪: bootstrap 多模态框实现的更多相关文章

  1. 解决bootstrap多模态框跳转时页面左移问题

    衍生问题暂未发现.... 忽略左右跳动视觉差 解决方法: 在bootstrap的js搜索padding-right,然后找到“+this.scrollbarWidth”,删掉即可.

  2. 黄聪:《跟黄聪学WordPress插件开发》

    续<跟黄聪学WordPress主题开发>之后,又一个作品完成!<跟黄聪学Wordpress插件开发>,国内最好的Wordpress插件开发视频教程!! 目录预览: WordPr ...

  3. 黄聪:Microsoft Enterprise Library 5.0 系列教程(三) Validation Application Block (高级)

    原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(三) Validation Application Block (高级) 企业库验证应用程序模块之配置文件模式: ...

  4. 黄聪:如何使用Add-on SDK开发一个自己的火狐扩展

    火狐开放了扩展的开发权限给程序员们,相信很多人都会希望自己做一些扩展来方便一些使用. 我最近做一些项目也需要开发一个火狐扩展,方便收集自己需要的数据,因此研究了几天怎么开发,现在已经差不多完成了,就顺 ...

  5. js控制Bootstrap 模态框(Modal)插件

    js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html

  6. Bootstrap模态框按钮

    1.触发模态框弹窗的代码 这里复制了一段Bootstrap模态框的代码 <h2>创建模态框(Modal)</h2> <!-- 按钮触发模态框 --> <but ...

  7. 解决bootstrap模态框内输入框无法获取焦点

    bootstrap 模态框中的input标签在某些情况下会无法获取焦点. 最终解决方法:去除模态框的 tabindex="-1" 属性即可

  8. Bootstrap 模态框(Modal)插件

    原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...

  9. Bootstrap 模态框在用户点击背景空白处时会自动关闭

    问题: Bootstrap 模态框在用户点击背景空白处时,会自动关闭. 解决方法: 在HTML页面中编写模态框时,在div初始化时添加属性 aria-hidden=”true” data-backdr ...

随机推荐

  1. nginx php

    server { listen 443; server_name www.awkj.com; ssl on; ssl_certificate cert/214683879970617.pem; ssl ...

  2. win7快捷方式图标修复

    test.bat ///////////////////////////////////////////////////////////////////////// rem 关闭Windows外壳程序 ...

  3. UGUI中Event Trigger的基本用法

    UGUI中Event Trigger的基本用法 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chin ...

  4. Unity 3D中ToLua-UGUI使用说明、导入Unity流程、制作登陆界面

    ToLua制作登录界面 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 请支持大神开发者:骏擎CP,蒙哥等奔 ...

  5. 自定义video样式

    和朋友聊天说到了video自定义样式问题,今天抽空简单试验了一下,下面贴上代码. dom结构如下: <video id="video1" width="399&qu ...

  6. C++学习(二)之Visual Studio写system语句 生成可执行文件

    system命令 1.首先先介绍一些system命令 windows+tab  //切换窗口 windows+R  //调出命令窗口 命令: 输入 calc  打开计算机 输入 cmd 打开命令窗口 ...

  7. 杜教BM

    #include <algorithm> #include <iterator> #include <iostream> #include <cstring& ...

  8. hdu3294 Girls' research manacher

    One day, sailormoon girls are so delighted that they intend to research about palindromic strings. O ...

  9. Go Example--变量

    package main import "fmt" //通过import导入fmt标准包 func main() { //定义变量,并初始化 var a string = &quo ...

  10. nginx配置基于域名的虚拟主机

    其实基于域名和基于ip的虚拟主机配置是差不多的,在配置基于ip的虚拟主机上我们只需要修改几个地方就能变成基于域名的虚拟主机,一个是要修改域名,一个是host文件直接看代码 [root@localhos ...