Bootstrap多层模态框modal嵌套问题
一、问题
在项目里忽然新加了一个需求,在原本弹出的模态框里,点击模态框里面的按钮再弹出一个模态框,出来另个模态框来展示详细信息。此时就存在两个模态框在这个需求没加之前有一个弹出的模态框也是需要继续点击(大致示意图如下),那个是时候去查过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嵌套问题的更多相关文章
- 黄聪:bootstrap中模态框modal在苹果手机上会失效
bootstrap中模态框在苹果手机上会失效 可将代码修改为<a data-toggle="modal" data-target="#wrap" hre ...
- Bootstrap使用模态框modal实现表单提交弹出框
Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...
- 黄聪:bootstrap的模态框modal插件在苹果iOS Safari下光标偏离问题解决方案
一行CSS代码搞定: body.modal-open { position: fixed; width: 100%; }
- Bootstrap中模态框多层嵌套时滚动条问题
在使用Bootstrap中模态框过程中,如果出现多层嵌套的时候,如打开模态框A,然后在A中打开模态框B,在关闭B之后,如果A的内容比较多,滚动条会消失,而变为Body的滚动条,这是由于模态框自带的遮罩 ...
- bootstrap模态框modal使用remote第二次加载显示相同内容解决办法
bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...
- Bootstrap(v3.2.0)模态框(modal)垂直居中
Bootstrap(v3.2.0)模态框(modal)垂直居中方法: 在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中. that.$element.children().e ...
- Bootstrap 实例 - 模态框(Modal)插件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Bootstrap历练实例:模态框(Modal)插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,其目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下进行一些交互,子窗体提供一些交互或信息. <!DOCTYPE html>&l ...
- Bootstrap 3 模态框播放视频
Bootstrap 3 模态框播放视频 I'm trying to use the Modal feature from Bootstrap 3 to show my Youtube video. I ...
随机推荐
- BZOJ 4393: [Usaco2015 Dec]Fruit Feast
DP #include<cstdio> using namespace std; int T,A,B,F[5000005],G[5000005]; int main(){ scanf(&q ...
- MySQL之架构与历史(一)
MySQL架构与历史 和其他数据库系统相比,MySQL有点与众不同,它的架构可以在多种不同的场景中应用并发挥好的作用,但同时也会带来一点选择上的困难.MySQL并不完美,却足够灵活,它的灵活性体现在很 ...
- vue2.x生命周期
vue2.x生命周期 1. beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用. 2. created 实例已经创建 ...
- Migrate a Domain-based Namespace to Windows Server 2008 Mode
TechNet Library Scripting with Windows PowerShell Windows and Windows Server Automation with Windows ...
- C 语言 习题 1-10
练习 1-10 编写一个将输入复制到输出的程序,并将其中的制表符替换为\t,把回退符替换为\b,把反斜杠替按为\\.这样可以将制表符和回退符以可见的方式显示出来. #include<stdio. ...
- thinkphp3.2接入支付宝支付接口(PC端)
下载支付宝接口包 点击这里 提取密码:aryp 整个接口核心类文件 alipay.config.php是相关参数的配置文件 alipayapi.php 是支付宝接口入口文件 not ...
- Redis 配置登录密码
1. 通过配置文件进行配置 打开 redis.conf,找到 #requirepass foobared 去掉行前的注释,并修改密码为所需的密码,保存文件 重启redis sudo service r ...
- mysql数据库二进制初始化出现:170425 17:47:04 [ERROR] /application/mysql//bin/mysqld: unknown option '--skip-locking' 170425 17:47:04 [ERROR] Aborting 解决办法
[root@localhost mysql]# ./scripts/mysql_install_db --user=mysql --basedir=/application/mysql/ --data ...
- redis linux 集群
redis集群:官方教程 步骤: 1.安装redis 2.修改配置文件redis.conf(集群所需基础配置) port 7000 cluster-enabled yes cluster-config ...
- xshell 连接redis
当我们安装好redis 在本地测试启动,存,取都正常,但是无法远程连接redis. 在redis.conf的文件默认配置中有一配置是 bind 127.0.0.1,表示绑定访问该redis的地址只能是 ...