Перемещение МодалПопуп за пределы кадра. Возможный?

Question

У меня есть фрейм внутри моей главной страницы. Внутри страницы iframe есть модалпопуп. Таким образом, когда показывается modalpopup, родительским элементом modalpopup является тело iframe и родительское тело главной страницы. Таким образом, наложение охватывает только iframe, а не всю страницу.

Я попытался переместить modalpopup из iframe в элемент тела родительского окна (или любой другой элемент внутри тела родителя), используя jQuery. Я получаю неверный аргумент.

Как мне показать modalpopup со страницы внутри iframe, и оно должно охватывать весь документ, а также родительский документ?

Обновление:

Поскольку немногие пользователи заинтересованы в достижении такого же поведения ... вот обходной путь

Лучший обходной путь, который я бы предложил, - это установить 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 с переполнением : auto или scroll вместо.

Такая настройка облегчает изменение внешнего вида всей страницы, поскольку вы не работаете с несколькими документами, каждый из которых по существу имеет свое собственное пространство окна внутри страницы. Вы можете обойти некоторые межкадровые коммуникации, и вам может быть проще поддерживать синхронизацию информации, если вам это нужно.

Это может не подходить для всех ситуаций и может потребовать ajax (или изменение dom с помощью javascript), чтобы изменить содержимое div вместо простой загрузки другого документа в iframe. Кроме того, некоторые старые мобильные браузеры, такие как сборки Android Froyo, плохо обрабатывают прокручиваемые div-ы.

Answer 2

Я сделал это, написав небольшой код для 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;
}

Answer 3

Это не так, как вы просите. Подумайте об этом так: iframe - это отдельное окно. Вы не можете (на данный момент) переместить div с одной веб-страницы на другую.

Answer 4

Вы ответили на свой вопрос в своем обновлении. Модальный диалог должен находиться на родительской странице и вызываться из iframe. Ваш единственный вариант - использовать прокручиваемый div вместо iframe.