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

Question

我的主页中有一个 iframe。 iframe 页面内有一个 modalpopup。所以当modalpopup显示出来的时候，modalpopup的父级就是iframe body和main page parent body。因此覆盖仅覆盖 iframe 而不是整个页面。

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

如何从 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 用于可滚动内容，则可以考虑使用带有 overflow: auto 或 scroll 的样式化 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;
}