一、问题

在项目里忽然新加了一个需求,在原本弹出的模态框里,点击模态框里面的按钮再弹出一个模态框,出来另个模态框来展示详细信息。此时就存在两个模态框在这个需求没加之前有一个弹出的模态框也是需要继续点击(大致示意图如下),那个是时候去查过bootstrap的这个modal,官网上写着:

不支持同时打开多个模态框
千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框,需要自己写额外的代码来实现。

于是就没打算同时打开多个模态框,因为第二个模态框打开后不再需要第一个模态框,于是就将这个功能改成当点击按钮后,将原本的模态框关闭,然后再出现第二个模态框,不让他们重叠显示。

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Info" id="Info">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">模态框一标题</h4>
</div>
<div class="modal-body">
<button type="button" class="ui-button ui-button-small ui-button-outline-primary" data-dismiss="modal">点击按钮</button>
</div>
<!--<div class="modal-footer">-->
<!--<button type="button" class="ui-button ui-button-small ui-button-outline-primary" data-dismiss="modal"-->
<!--aria-label="Close"><span aria-hidden="true">关闭</span></button>-->
<!--</div>-->
</div>
</div>
</div>
  $('#Info').on('hidden.bs.modal', function () {
//模态框关闭时执行
$("#Info2").modal({
keyboard: false,
show:true
});
});

给按钮上绑定data-dismiss="modal"属性,当点击按钮的时候,执行关闭操作,然后将第二个模态框打开。

现在新的需求是点击可查看图片详情,关闭图片详情还需要继续回到之前的模态框,进行其他的操作(如下图所示),所以之前的那种解决方案不再适用,必须要实现模态框的叠加。

<p class="m2">查看图片</p>
//第二层预览图片的模态框
<div id="secondmodal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm2" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="modal-body">
<div class="icon-"><img src="/assets/app/images/yulan.png" alt="1"></div>
</div>
</div>
</div>
</div>
  $('.m2').on("click", function () {
$('#secondmodal').modal();
});

好像这种层叠的模态框会使背景颜色不断叠加变深的,这种好像是通过修改控制背景颜色的class和js方法便可解决。(没有去试过)

Bootstrap多层模态框modal嵌套问题的更多相关文章

  1. 黄聪:bootstrap中模态框modal在苹果手机上会失效

    bootstrap中模态框在苹果手机上会失效 可将代码修改为<a  data-toggle="modal" data-target="#wrap" hre ...

  2. Bootstrap使用模态框modal实现表单提交弹出框

    Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...

  3. 黄聪:bootstrap的模态框modal插件在苹果iOS Safari下光标偏离问题解决方案

    一行CSS代码搞定: body.modal-open { position: fixed; width: 100%; }

  4. Bootstrap中模态框多层嵌套时滚动条问题

    在使用Bootstrap中模态框过程中,如果出现多层嵌套的时候,如打开模态框A,然后在A中打开模态框B,在关闭B之后,如果A的内容比较多,滚动条会消失,而变为Body的滚动条,这是由于模态框自带的遮罩 ...

  5. bootstrap模态框modal使用remote第二次加载显示相同内容解决办法

    bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...

  6. Bootstrap(v3.2.0)模态框(modal)垂直居中

    Bootstrap(v3.2.0)模态框(modal)垂直居中方法: 在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中. that.$element.children().e ...

  7. Bootstrap 实例 - 模态框(Modal)插件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. Bootstrap历练实例:模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,其目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下进行一些交互,子窗体提供一些交互或信息. <!DOCTYPE html>&l ...

  9. Bootstrap 3 模态框播放视频

    Bootstrap 3 模态框播放视频 I'm trying to use the Modal feature from Bootstrap 3 to show my Youtube video. I ...

随机推荐

  1. idea 安装findBugs 可以做代码扫描,也可以导出扫描结果生成扫描报告

    idea 安装findBugs 可以做代码扫描,也可以导出扫描结果生成扫描报告 https://my.oschina.net/viakiba/blog/1838296 https://www.cnbl ...

  2. Apache Compress-使用

    Apache Compress 是什么? Apache  提供的文件压缩工具. 运行环境 jdk 1.7 commons-compress 1.15 测试代码 package com.m.basic; ...

  3. leetcode 【Search a 2D Matrix 】python 实现

    题目: Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the f ...

  4. php伪随机数漏洞 以及脚本php_mt_seed的使用教程

    前几天在群里看到了一个题目,发现自己没有接触过这个伪随机数这个漏洞,在此记录下. 搜索这两个函数 mt_scrand() mt_rand() mt_scrand(seed)这个函数的意思,是通过分发s ...

  5. LeetCode with Python -> Dynamic Programming

    198. House Robber You are a professional robber planning to rob houses along a street. Each house ha ...

  6. 数组线性表ArrayList 和链表类LinkedList

    数组线性表类ArrayList 和链表类LinkedList 是实现List接口的两个具体类.ArrayList 数组储存元素,这个数组是动态创建的.如果元素个数超过了数组的容量,就创建一个更大的新数 ...

  7. Django-缓存机制、跨域请求(CORS)、ContentType组件

    Django缓存机制: 在settings中间件里面设置: 三个粒度: 1 全站缓存 用中间件: MIDDLEWARE = [ # 'django.middleware.cache.UpdateCac ...

  8. android实现前置后置摄像头相互切换

    首先自定义一个继承自SurfaceView并且实现了SurfaceHolder.Callback接口的组件: public class CameraView extends SurfaceView i ...

  9. IE IE8 iframe的onload方法分析 IE浏览器onload事件失效

    判断iframe是否加载完成的完美方法 IE 支持 iframe 的 onload 事件,不过是隐形的,需要通过 attachEvent 来注册. 第二种方法比第一种方法更完美(采用readystat ...

  10. rsync 使用小记

    工作中遇到了有关rsync使用的问题,在这里记录下供有同样需求的人参考一下 先说下环境 服务端配置 pid file = /rsyncdata/rsyncd.pid port = 873 addres ...