将ModalPopup移到IFrame之外。可能吗？

Question

我在主页面内有一个iframe。 iframe页面内有一个modalpopup。 当modalpopup显示时，它的父级是iframe body和主页面parent body。 因此覆盖层只覆盖了iframe而不是整个页面。

我尝试使用jQuery将modalpopup从iframe移动到父窗口的body元素（或父级body内的任何其他元素）。 我收到了无效参数错误。

如何从iframe内的页面显示modalpopup并覆盖整个文档，包括父文档？

更新：

由于一些用户对实现相同的行为感兴趣，所以这里提供一个解决方法。

我建议最好的解决方法是将modalpopup放在主页面中，然后从iframe中调用它，类似于以下内容：

/* function in the main(parent) page */
var _onMyModalPopupHide = null;
function pageLoad(){
    // would be called by ScriptManager when page loads
    // add the callback that will be called when the modalpopup is closed
    $find('MyModalPopupBehaviorID').add_hidden(onMyModalPopupHide);
}
// will be invoked from the iframe to show the popup
function ShowMyModalPopup(callback) {
    _onMyModalPopupHide = callback;
    $find('MyModalPopupBehaviorID').show();
}
/* this function would be called when the modal popup is closed */
function onMyModalPopupHide(){
    if (typeof(_onMyModalPopupHide) === "function") {
        // fire the callback function
        _onMyModalPopupHide.call(this);
    }
}

/* functions in the page loaded in the iframe */
function ShowPopup(){
    if(typeof(window.parent.ShowMyModalPopup) === "function") {
        window.parent.ShowMyModalPopup.apply(this, [OnPopupClosed]);
    }
}
// will be invoked from the parent page .. after the popup is closed
function OnPopupClosed(){
    // do something after the modal popup is closed
}

希望这能帮到你

- ZuhaibZ

---

如果您要包含解决方案，请将其作为答案发布，而不是问题的更新。这样做会减少混淆，并帮助其他人专注于可能有更好答案的问题。 - mason

Answer 1

如果您只是为了可滚动内容而使用iframe，您可以考虑使用带有overflow: auto或scroll的样式div。

这样设置可以更轻松地修改整个页面的外观，因为您不需要处理每个基本上在页面内具有自己窗口空间的多个文档。您可以绕过一些跨框架通信，并且如果需要保持信息同步，则可能更容易实现。

这种方法可能并不适用于所有情况，并且可能需要ajax（或使用javascript修改dom）来更改div内容，而不仅仅是在iframe中加载不同的文档。此外，一些旧的移动浏览器（如Android Froyo版本）无法很好地处理可滚动的div。

- skunkshow

Answer 2

在你的更新中已经回答了自己的问题。模态对话框需要存在于父页面并从 iframe 中调用。你唯一的其他选择是使用滚动 div 而不是 iframe。

- Mike Becatti

Answer 3

按照您的要求是不可能的。可以这样想：iframe 是一个单独的窗口。目前（暂时）无法将一个网页中的 div 移动到另一个网页中。

- user962042

Answer 4

我通过编写一个小的jQuery代码来完成这个，如下所示，希望可以帮到你：

注意：确保在同一域上进行操作。

HTML:

<button type="button" id="popup">Show Popup</button>
<br />
<br />
<iframe src="your url" style="width: 100%; height:400px;"></iframe>

JS：

// Author : Adeel Rizvi
// It's just a attempt to get the desire element inside the iframe show outside from iframe as a model popup window.

// As i don't have the access inside the iframe for now, so I'll grab the desire element from parent window.

(function () {
    $.fn.toPopup = function () {
        return this.each(function () {

            // Create dynamic div and set its properties
            var popUpDiv = $("<div />", {
                class: "com_popup",
                width: "100%",
                height: window.innerHeight
            });

            // append all the html into newly created div
            $(this).appendTo(popUpDiv);

            // check if we are in iframe or not
            if ($('body', window.parent.document).length !== 0) {

                // get iframe parent window body element
                var parentBody = $('body', window.parent.document);

                // set height according to parent window body
                popUpDiv.css("height", parentBody.height());

                // add newly created div into parent window body
                popUpDiv.appendTo(parentBody);

            } else {

                // if not inside iframe then add to current window body
                popUpDiv.appendTo($('body'));
            }

        });
    }
})();

$(function(){
 $("#popup").click(function () {

    // find element inside the iframe
    var bodyDiv = $('iframe').contents().find('YourSelector');


    if (bodyDiv.length !== 0) {

        // Show
        $(bodyDiv).toPopup();

    } else {
        alert('Sorry!, no element found');
    }

 });
});

CSS：

.com_popup {
    background-color: Blue;
    left: 0;
    position: absolute;
    top: 0;
    z-index: 999999;
}

- Adeel Rizvi