Bootstrap多层模态框modal嵌套问题

时间：2022-06-28 15:03:23

一、问题

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

不支持同时打开多个模态框

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

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

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"属性，当点击按钮的时候，执行关闭操作，然后将第二个模态框打开。

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

Bootstrap多层模态框modal嵌套问题Bootstrap多层模态框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方法便可解决。（没有去试过）

相关文章