jQuery 从 iFrame 打开模态窗口到父窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26613469/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
opening modal window from iFrame into parent window
提问by user3548416
I need some help appending a modal from an iFrame to it's parent body. I've heard about the jQuery plugin SimpleModaland even tried it, but failed.
我需要一些帮助将 iFrame 中的模态附加到它的父主体。我听说过 jQuery 插件SimpleModal，甚至尝试过，但失败了。
So I have a page with an iFrame and inside this iFrame there is a button that should open a modal window in the parent window. The problem is that I don't have access to put code into the parent window. I just have access to the iFrame.
所以我有一个带有 iFrame 的页面，在这个 iFrame 里面有一个按钮应该在父窗口中打开一个模式窗口。问题是我无权将代码放入父窗口。我只能访问 iFrame。
For any kind of help, I'm very thankful!
对于任何形式的帮助，我非常感谢！
回答by SpYk3HH
Without any example code, it's kinda hard to show you per your exact layout, but I can give you an example of how I've achieved this. Keep in mind, everything must be on the same domain, which I would assume it is.
没有任何示例代码，很难按照您的确切布局向您展示，但我可以举一个我如何实现这一目标的示例。请记住，一切都必须在同一个域中，我认为它是。
I had to do this for a CRM I've developed and here's an example of how I did it:
我必须为我开发的 CRM 执行此操作，以下是我如何执行此操作的示例：
parent HTML
父 HTML
<body>
<div id="myModal">stuff</div>
parent JS
父JS
<script>
$(function() {
$('#myModal').someDialogPlug({ some: options });
})
</script>
iFrame HTML
框架 HTML
<button id="btnPopModal">click me</button>
iFrame JS
框架JS
<script>
$(function() {
$('#btnPopModal').on('click', function(e) {
// here's the fun part, pay attention!
var $body = $(window.frameElement).parents('body'),
dlg = $body.find('#myModal');
dlg.someDialogPlugin('open');
});
})
</script>
回答by Vendhan Parthy
Let me explain with my code for this scenario,
让我用我的代码解释这个场景，
Parent HTML
父 HTML
<div id="CatModal" class="modal fade" role="dialog">
<div class="modal-dialog ">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
</div>
</div>
</div>
iframe HTML
内嵌框架 HTML
<button id="btnPopModal">click me</button>
iframe JS
框架JS
window.parent.$('#CatModal').modal('show');
change the content of modal-bodyby
改变modal-bodyby的内容
window.parent.$('.modal-body').html('content stuff');
回答by Imran
window.parent.show_messageNew(title, content);
window.parent.show_messageNew(title, content);
function show_messageNew(title, content)
{
$('#myModal_Title').html(title);
$('#myModal_Content').html(content);
$('#myModal_Message').modal().css(
{
'margin-top': function () {
//var offss = $(this).height() - window.parent.scrollY;
var offss = window.parent.scrollY;
console.log(offss);
return offss;
}
});
//debugger;
$('#myModal_Message', window.parent).modal();
}
