在IFrame之外移动ModalPopup。可能？

Question

我的主页里面有一个iframe。 iframe页面中有一个modalpopup。因此，当显示modalpopup时，modalpopup的父级是iframe主体和主页面父主体。因此，叠加层仅覆盖iframe，而不是整个页面。

我尝试使用jQuery将modalpopup从iframe移动到父窗口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
}

希望有所帮助

Answer 1

如果您仅将iframe用于可滚动内容，则可以考虑使用带有溢出：自动或滚动的样式div。

这样的设置可以更容易地修改整个页面的外观，因为您不使用多个文档，每个文档在页面内部都有自己的窗口空间。您可以绕过某些跨框架通信，如果需要，可以更容易保持信息同步。

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

Answer 2

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

Answer 3

你问的方式是不可能的。可以这样想：iframe是一个单独的窗口。你不能（暂时）将一个网页中的div移动到另一个网页中。

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