iframe 中的模态在关闭其他模态后删除主窗口中的滚动
Posted
技术标签:
【中文标题】iframe 中的模态在关闭其他模态后删除主窗口中的滚动【英文标题】：Modal inside an iframe removes scroll in the main window, after close other modal 【发布时间】：2018-05-26 13:22:04 【问题描述】：我有一个带有 iframe 的页面。在这个 iframe 中，我有一个打开模式的按钮。模态代码在主窗口中，而不是在 iframe 中。
在这个模式中，我有一个打开其他模式的按钮。第二个模态框位于主窗口中，而不是 iframe 中。
当我关闭 2 个模式时，主窗口中的滚动消失了。
查看 Google Chrome Inspector，我在 body 标记中看到了“modal-open”类。如果我删除这个类，滚动又回来了。
如果我打开第二个模态而不使用 iframe 中的按钮打开模态，一切正常。如果我先用 iframe 内的按钮打开模态，然后打开第二个模态，在关闭 2 个模态后，“modal-open”类不会从主体标签（主窗口）中删除，并且滚动消失了。
关闭第二个模态框后，我试图从主窗口的正文标记中强制删除类“modal-open”，使用以下代码：
$('#my-second-modal').on('hide.bs.modal', function (event)
$('body').removeClass('modal-open');
);
它起作用了，因为它删除了“modal-open”类，但又自动添加了这个类！我看到这个类被删除和添加了！
当modal打开时，body标签接收到“modal-open”类和一点内联样式：
style="padding-right: 15px;"
当我关闭第二个模态时，这个样式被正确地删除并且不再添加，只有“modal-open”类。
我不知道这个类是如何自动添加的。在另一页中，我也有 2 个打开的模式，但是在主窗口中调用了所有模式，我没有 iframe。在这个页面中，工作正常。
问题在于 iframe 内部调用的模式。
我正在使用 Twitter Bootstrap 3.3.7。
感谢任何帮助。
编辑 1：
我必须修复信息，因为两个模式都在主窗口中。只有调用第一个模式的按钮在 iframe 内。
当我打开第一个模态框（iframe 内的按钮）时，iframe 内的 body 标签会接收到“modal-open”类。当我打开第二个模态（第一个模态内的按钮）时，主窗口的主体标签接收类“modal-open”。
当我关闭第二个 modal 时，主窗口的 body 标记中的内联样式（padding-left）被删除，但“modal-open”类没有。当我关闭第一个模态框时，de iframe 内的 body 标签的“modal-open”类被正确删除。
主窗口代码
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Main Window</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" media="all" href="/dev-assets/font-awesome.self-ae5944f442c4b0b183eda9a324292760ce827907d2ce6c2a238b2731b326a7f1.css?body=1" />
<link rel="stylesheet" media="all" href="/dev-assets/my-page.self-5cb0c84bdcdd793a871aa1a02ed64373c4e5e2090ed90f8dc6a2b533a400938c.css?body=1" />
<!--[if IE]><link rel="stylesheet" media="all" href="/stylesheets/iehacks.css" /><![endif]-->
</head>
<body>
<main class="container">
<section class="application">
<div id="iframe_edit">
<iframe src="/my-page?edit_fields=1" onload="this.style.height=this.contentDocument.body.scrollHeight +'px';"></iframe>
</div>
<!-- THIS IS THE FIRST MODAL CALLED INSIDE IFRAME -->
<div class="modal fade" id="modalFields" tabindex="-1" role="dialog" aria-labelledby="modalFieldsLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modalFieldsLabel">TITLE FIRST MODAL</h4>
</div>
<div class="modal-body">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalFields">
Launch Second Modal
</button>
</div>
</div>
</div>
</div>
</section>
</main>
<script src="/dev-assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1"></script>
<script src="/dev-assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1"></script>
<script src="/dev-assets/bootstrap/modal.self-3e78617ade5663314b7ee0ea10375a5b34d59ffbade44939e3f2a4e4ef2019b3.js?body=1"></script>
<script src="/dev-assets/bootstrap-sprockets.self-fbfa5ad7d9aa0afe439ec4ff3883acc4cb92b62cb67c40d674320c9aa1d4642d.js?body=1"></script>
<script src="/dev-assets/jquery.mask.self-3b775d6e0b0f5cff98aca4daaa7f27a7c3678f39d1f5186776bb14b63cc2f625.js?body=1"></script>
<script src="/dev-assets/my-page.self-379839c031efa970d9805b32480311472415bda146fb2a677aef5d7f882313b1.js?body=1"></script>
<!-- THIS IS THE SECOND MODAL CALLED IN THE FIRST MODAL -->
<div class="modal fade" id="ModalGalleryImg" tabindex="-1" role="dialog" aria-labelledby="ModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="ModalLabel">TITLE SECOND MODAL</h4>
</div>
<div class="content modal-body">
<div class='content'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet minima iure consequuntur, fugiat, quasi fugit molestiae, cumque tempora similique sunt. Animi veniam architecto odit id mollitia modi placeat rerum.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Iframe 代码
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>My IFRAME</title>
<meta property="og:title" content="My IFRAME">
<meta name="twitter:title" content="My IFRAME">
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="/piq31mMqVDPVA0evy8fn6BkMK6OoQ1x1JSnNJ7QKezoWF+amLU4F+S5CN0oKHpFXz1IvUg98wiJeWk//ZyroA==" />
<link rel="stylesheet" media="all" href="/dev-assets/font-awesome.self-ae5944f442c4b0b183eda9a324292760ce827907d2ce6c2a238b2731b326a7f1.css?body=1" />
<link rel="stylesheet" media="all" href="/dev-assets/my-iframe/css/style.self-8c572b6acc14a939ae61a606b2bfe36f8c47defcbe0c2e9fb8d8061f773a00a0.css?body=1" />
<link rel='dns-prefetch' href='//s.w.org'>
</head>
<body class="palette-main">
<header class="container bg-header"></header>
<div id="MenuArea" class="container"></div>
<main class="container">
<div class="row">
<div class="col-xs-12" data-group="group1">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalFields">
Launch First Modal
</button>
<div class="contorno-topico">
<div class="caption-main">
<h3 class="title-white" data-line="title_group1">TITLE G1</h3>
<p data-multiline="body_group1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima sit quisquam tempora? At obcaecati similique ab soluta illo, itaque? Voluptates quia fugiat ullam nihil esse doloremque possimus omnis perspiciatis laborum.</p>
</div>
<div style="background-image: url(/dev-assets/default-654645645.jpg); background-size: contain" data-bg="/dev-assets/default-654645645.jpg" data-image="image_group1"></div>
</div>
</div>
</div>
</main>
<script src="/dev-assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1"></script>
<script src="/dev-assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1"></script>
<script src="/dev-assets/site.self-4f08fc2b9ee0dc10cdc3b91b3c48199e757c0564fe65e1fe4f9bf26bb354b1f1.js?body=1"></script>
<script src="/dev-assets/bootstrap.min.self-d66e555f160df017adf1ca16a36cd609a36d49c51637e365c5b8847d0065fa40.js?body=1"></script>
<script src="/dev-assets/my-iframe/js/main.self-b849589d36316233b46ae6e1419e23af2945ebc08a0aac2529a52985f6f94b2a.js?body=1"></script>
</body>
</html>
【问题讨论】：
在您的问题中附加您的代码。 @hamed-javaheri 感谢您的评论。我已经添加了代码并更正了一些信息。 【参考方案1】：我解决了更改打开模式的方法的问题。 我使用的是 JS，而不是在按钮中使用数据属性打开：
点击 iframe 内的按钮打开模态框
$('.first-modal').click(function()
window.parent.$('#modalFields').modal('show');
);
这样，模式将在主窗口上下文中打开并且工作正常。
【讨论】：
以上是关于iframe 中的模态在关闭其他模态后删除主窗口中的滚动的主要内容，如果未能解决你的问题，请参考以下文章