在关闭第二个模态后在模态中使用模态，滚动指的是主体 [英] Use modal in a modal after closing the second modal, the scrolling refers to the body
问题描述
我是一名新的前端开发人员，在执行项目时遇到问题.我在模态中使用了模态，它可以工作.我的第一个模态是一个长模态，需要滚动才能查看全部内容.
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-openremoved from<body>
这两个问题都可以通过 bootstrap
both problems can be solved with custom code as suggested by bootstrap
不支持多个打开模式
确保在另一个仍然可见的情况下不要打开模式.一次显示多个模态需要自定义代码.
Multiple open modals not supported
Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.
$(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
});
});
这篇关于在关闭第二个模态后在模态中使用模态，滚动指的是主体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
