Question

我是一名新的前端开发人员，我在完成项目时遇到了问题。我在模态中使用模态并且它有效。我的第一个模态是一个长模态，需要滚动才能看到整个内容。

<a data-toggle="modal" data-target="#modalmessage1"><button class="btn btn-gold tdc-width-100 tdc-mt-10" ><img class="img-button-icon" src="<?php echo base_url();?>img/email-white.png">SEND MESSAGE</button></a>

问题是：当第二个模态关闭时。滚动指的是身体。我无法滚动第一个模态来查看整个内容。

问题：关闭第二个模态后如何启用第一个模态的滚动？

Answer 1

在处理bootstrap堆叠模态时，最常见的问题是

第二模态叠加出现在第一个模态
在关闭第二个模态时，滚动消失，因为modal-open已从<body>中移除

这两个问题都可以使用bootstrap

不支持多种开放式模式
确保不打开模态，而另一个模态仍然可见。一次显示多个模态需要自定义代码。

$(document).ready(function () {
    $('secondmodalselector').on('show.bs.modal', function () {
        $('firstmodalselector').css('z-index', 1039); //this will push the first modal overlay behind second modal overlay
    });

    $('secondmodalselector').on('hidden.bs.modal', function () {
        $('firstmodalselector').css('z-index', 1041); //bring back the first modal overlay to it's normal state when 2nd modal closed
        $('body').addClass('modal-open'); // add `modal-open` class back to body when 2nd modal close so first modal will be scrollable
    });
});

关闭第二个模态后，在模态中使用模态，滚动指的是主体

1 个答案: