Bootstrap多层模态框如何嵌套？

最新推荐文章于 2023-11-29 09:11:18 发布
最新推荐文章于 2023-11-29 09:11:18 发布
阅读量2.1w 收藏 5
点赞数 2 
我希望，首先打开模态框1，然后打开模态框2，然后关闭模态框2，然后关闭模态框1.
但是我发现打开模态框1再打开模态框2的时候，模态框2被模态框1压住了，我希望模态框2压住模态框1.
于是不会了~求教

我知道bootstap是不支持多层模态框，但是还是希望完成这个功能，请知道答案的人回答一下谢谢！



 
 

  
  提问者采纳
  
  

  
  

  
  

  
  

 
 

 
 

  
  

  
  

   
   
使用js去弹出第二个模态框 其一：

   
   
<!DOCTYPE html>
<html>

    <head>
        <meta charset='utf-8'>
        <title>bootstrap模态框(modal)</title>
        <link href="../../css/bootstrap.min.css" rel="stylesheet">
        <script src="../../js/jquery-2.1.1.min.js"></script>
        <script src="../../js/bootstrap.min.js"></script>
        <!--jquery必须是1.9.0版本以上的
   -->
        <script>
            $(function(){
                      $("#btn2").click(function(){
                       
                       $("#show2").modal("show");
                   });
                 
             })
        </script>
    </head>

    <body>

        <div class="container ">

            <h1 class="page-header">bootstrap模态框(modal)</h1>

            <button class="btn btn-primary" data-toggle='modal' data-target='#show'>登陆</button>

            <div class="modal fade  " id='show' >
                <div class="modal-dialog">
                    <div class="modal-content">

                        <button class="close" data-dismiss='modal'>×</button>
                        <h1 class="modal-title">一层模态框</h1>
                        <div class="modal-footer">
                            <button class="btn btn-primary" data-toggle='modal' id="btn2">再弹</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade  " id='show2'>
                <div class="modal-dialog">
                    <div class="modal-content">

                        <button class="close" data-dismiss='modal'>×</button>
                            <h1 class="modal-title">二层模态框</h1>
                        <div class="modal-body">
                            12312312
                        </div>
                        <div class="modal-footer">
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>



  
  

 
 

 
 

  
  x_men_01
 
 

 
 

  
  

   
   
   
   
  
  
很好，非常感谢，很好的解决了我的难题，就是bootstrap模态框无法重叠的问题，不过第二个模态框我没使用js调用方式，而还是使用第一个模态框弹出来的方式，即： <button class="btn btn-primary" data-toggle='modal' id="btn2" data-target="#show2">再弹 </button> 好用，非常感谢~！
 
 


其二：

 
 

  
  

   
   这篇文章主要介绍了使用jQuery和Bootstrap实现多层、自适应模态窗口,需要的朋友可以参考下
  
  

  
  

   
   本篇实践一个多层模态窗口，而且是自适应的。
  
  

  
  

   
   点击页面上的一个按钮，弹出第一层自适应模态窗口。
  
  

  
  

   
   在第一层模态窗口内包含一个按钮，点击该按钮弹出第二层模态窗口，弹出的第二层模态窗口会挡住第一层模态窗口，即第二层模态窗口打开的时候，无法关闭第一层模态窗口。
  
  

 
 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>test2.html</title>
	<link href="../css/bootstrap.min.css" rel="stylesheet">
	<script src="../js/jquery-2.1.1.min.js"></script>
	<script src="../js/bootstrap.js"></script>
    <style type="text/css">
        .modal-open,
        .modal-open .navbar-fixed-top,
        .modal-open .navbar-fixed-bottom {
            margin-right: 0;
        }
        .modal {
            bottom: auto;            
            padding: 0;
            background-color: #ffffff;
            border: 1px solid #999999;
            border: 1px solid rgba(0, 0, 0, 0.2);
            border-radius: 6px;
            -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
            box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
            background-clip: padding-box;
            overflow-y: auto;
        }
        .modal.container {
            max-width: none;
        }
        #firstmodal {
            width: 98%;
            height: 98%;
        }
        #secondmodal {
            width: 55%;
            height: 55%;
        }
    </style>
    <script type="text/javascript">
        $(function() {
            $('#m1').on("click", function() {
                $('#firstmodal').modal();
            });
            $('#m2').on("click", function () {
                $('#secondmodal').modal();
            });
        });
    </script>
</head>
<body>
        <div class="content" style="margin-left: 100px;margin-top: 100px;">
            <button class="btn btn-primary btn-lg" id="m1">打开第一层模态窗口</button>
        </div>
        <div id="firstmodal" class="modal container fade" tabindex="-1" style="display: none;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">第一层模态窗口</h4>
            </div>
            <div class="modal-body">
                <p>
                    <button class="btn btn-primary btn-lg" id="m2">打开第二层模态窗口</button>
                    第一层主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体
             
                </p>
            </div>
            <div class="modal-footer" style="text-align: center;">
                <button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
            </div>
        </div>
        <div id="secondmodal" class="modal container fade" tabindex="-1" style="display: none;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">第二层模态窗口</h4>
            </div>
            <div class="modal-body">
                <p>
                    第二层主体内容主体内容主体内容主体内
                </p>
            </div>
            <div class="modal-footer" style="text-align: center;">
                <button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
            </div>
        </div>
</body>
</html>



以上就是jQuery和Bootstrap实现多层、自适应模态窗口的全部内容了，非常的不错，而且很实用，直接就可以使用到项目中去。

蜡笔小春
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap多层模态框滚动条消失的问题
08-29
Bootstrap 多层模态框滚动条消失的问题解决方案 Bootstrap 多层模态框是一个常用的 UI 组件，它可以帮助开发者快速创建美观的模态框。然而，在使用 Bootstrap 创建多层模态框时，可能会遇到一个问题，即滚动条消失...
Bootstrap模态框嵌模态框(多层模态框)的实现
gyueh的博客
11-27 1711
以下实例用于创建多层模态框的嵌套效果: 1.下载用于生产环境的Bootstrap (网址：https://v3.bootcss.com/getting-started/#download) 2.在页面内head标签内引入样式库bootstrap.min.css 3.在页面内body标签尾部引入任意一jq库和bootstrap.min.js， 例如： <head> <meta ...
bootstrap实现嵌套模态框
weixin_45397941的博客
01-08 662
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
bootstrap嵌套模态框完美解决
最新发布
sdad2154的博客
11-29 510
本身官网不支持嵌套 但是可以弹出两个模态框 后者会在html上覆盖前者 这样每次都可以操作自己的模态框了。
模态框记录学习使用
汤圆的博客
12-02 237
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="JSmin/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="JSmin/bootstrap.min.js" t
bootstrap模态框嵌套问题
qq_41157351的博客
12-23 589
bootstrap模态框嵌套问题
Bootstrap系列之模态框（Modal）
热门推荐
老__L的博客
06-16 1万+
模态框（Modal）
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
08-29
Bootstrap 模态框嵌套、tabindex 属性、去除阴影的示例代码 Bootstrap 模态框嵌套是一种常见的交互方式，主要用于在点击某个元素后弹出一个模态框，而在该模态框中又可以点击其他元素弹出另一个模态框。这种方式...
bootstrap实现嵌套模态框的实例代码
10-15
然而，Bootstrap官方并不推荐使用嵌套模态框，因为它们可能导致复杂性和潜在的可用性问题。尽管如此，有些场景下可能需要实现这样的功能，例如在第一个模态框中触发第二个模态框。 在这个实例中，我们将探讨如何在...
Bootstrap3 模态框使用实例
08-31
Bootstrap3 模态框（Modal）是网页设计中常用的一种交互元素，用于展示弹出式的内容，如警告、确认对话框或者更复杂的信息。它允许用户在不离开当前页面的情况下处理额外的信息或执行操作。以下是对Bootstrap3模态框...
Bootstrap多层模态框modal嵌套问题
dengling4813的博客
06-19 789
一、问题 在项目里忽然新加了一个需求，在原本弹出的模态框里，点击模态框里面的按钮再弹出一个模态框，出来另个模态框来展示详细信息。此时就存在两个模态框在这个需求没加之前有一个弹出的模态框也是需要继续点击（大致示意图如下），那个是时候去查过bootstrap的这个modal，官网上写着： 不支持同时打开多个模态框 千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要...
解决Bootstrap一个页面弹出的模态框嵌套多个模态框时，样式混乱，按钮不能点击。
风吹草动
03-29 9693
问题：当模态框嵌套模态框时，在弹出第一个模态框时，发现样式乱了 原因：当弹出第一个模态框时，嵌套的模态框也被显示出来了，只是内容不显示，被第一个模态框压下了。 解决：在嵌套的模态框中的第一行加入style="display: none;" 即默认隐藏，这样在弹出第一个模态框时，其他模态框处于隐藏状态，样式就不会乱了 <div class="modal fade" id="addModal
【Bootstrap】解决打开多个模态框层次问题与滚动条问题
qq495247027的博客
09-29 578
【代码】【Bootstrap】解决打开多个模态框层次问题与滚动条问题。
关于bootstrap的modal弹出层嵌套子Modal所引发的血案
iteye_20240的博客
07-04 884
bootstrap的弹出层嵌套有一个问题 ，当子modal关闭时父的modal也会自动关闭，这可能是bootstrap的一个问题，经过资料仔细查找，发现需要修改bootstrap.js的源码， 需要找到这一行 this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, thi...
bootstrap嵌套php,bootstrap模态框嵌套、tabindex属性详解
weixin_34651330的博客
03-19 242
本文主要介绍了bootstrap模态框嵌套、tabindex属性、去除阴影,需要的朋友可以参考下，希望能帮助到大家。模态框嵌套在开发中，遇到需要通过点击事件触发第一个模态框，触发后通过事件唤起第二个模态框，并且通过事件触发第三个模态框；即模态框嵌套。模态框嵌套需要用一个模态框包裹所涉及嵌套的模态框，从而点击触发模态框不会乱掉。HTML代码如下：tabindex模态框中tabindex属性w3c的解...
bootstrap多层模态框嵌套问题
博客
03-04 2993
在使用Bootstrap中模态框过程中，如果出现多层嵌套的时候，如打开模态框A，然后在A中打开模态框B，在关闭B之后，如果A的内容比较多，滚动条会消失，而变为Body的滚动条，这是由于模态框自带的遮罩的问题。网上有朋友给出的解决方案是在A增加overflow:auto的方法解决，但是这种方法会使得页面出现两个滚动条。 原因是由于遮罩造成的，那么可以重新增加遮罩，即在关闭B之后，重新给body增加遮...
Bootstrap 模态框嵌套模态框冲突处理
zt760228595的博客
09-06 2985
问题：关闭嵌套模态框后影响第一个模态框（无法滑动下拉） **原因：**body中的“.modal-open” class属性缺失，影响模态框 解决思路： 通过bootstrap的模态框modal的hidden.bs.modal属性给body添加上“.modal-open”属性 方法： //解决bootstra模态框嵌套问题嵌套模态框添加class属性nested...
关于bootstrap中两个模态框嵌套的问题
qq_42283150的博客
06-26 2348
在bootstrap中如果存在两个模态框先后弹出时,就会出现一些问题,比如关闭最上层模态框时,会发现下一层的那个模态框无法滚动,这时候你滚动的会是body页面的内容,通过查阅得知可以在关闭位置添加如下代码 $("#myModal").on("hidden.bs.modal", function () { if ($('.modal.in').size() >= 1) { ...
Bootstrap 3 模态框chosen
05-23
如果您想在 Bootstrap 3 模态框中使用 Chosen 插件，可以按照以下步骤进行操作： 1. 首先，确保您已经引入了 Bootstrap 和 Chosen 插件的相关文件。 2. 在模态框的 HTML 代码中，添加一个 select 元素，并为其添加一个唯一的 ID。例如： ``` <div class="modal-body"> <select id="my-select" class="chosen-select"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> </div> ``` 3. 在模态框显示之后，初始化 Chosen 插件。例如： ``` $('#myModal').on('shown.bs.modal', function () { $('.chosen-select', this).chosen(); }); ``` 其中，#myModal 是您的模态框的 ID。 这样，您就可以在 Bootstrap 3 模态框中使用 Chosen 插件了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值