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

本文介绍了在关闭第二个模态后在模态中使用模态，滚动指的是主体的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是一名新的前端开发人员，在执行项目时遇到问题.我在模态中使用了模态，它可以工作.我的第一个模态是一个长模态，需要滚动才能查看全部内容.

I am a new front end developer and I am having problem doing my project. I used modal in a modal and it works. My first modal is a long modal which needs to be scrolled to see the entire content.

<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>

问题是::第二个模式关闭时.滚动条是指身体.我无法滚动第一个模态来查看全部内容.

The problem is: When the second modal is closed. the scroll refers to the body. I can not scroll the first modal to see the whole content.

问题:在关闭第二个模态后如何启用第一个模态的滚动?

Question: How can I enable the scroll of the first modal after closing the second modal?

推荐答案

在处理引导程序堆栈模式时，最常见的问题是

When dealing with bootstrap stacked modal, most common problems are

第二个模式叠加层出现在第一个模式的后面
在关闭第二个模态时，滚动消失了，因为从<body>中删除了modal-open

2nd modal overlay appearing behind first modal
on closing 2nd modal, scrolling disappear because modal-open removed from <body>

这两个问题都可以通过 bootstrap

both problems can be solved with custom code as suggested by 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
    });
});

这篇关于在关闭第二个模态后在模态中使用模态，滚动指的是主体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！