Подтвердить что ты не робот

Перемещение ModalPopup Вне IFrame. Возможное?

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

Я попытался переместить modalpopup из iframe в элемент body родительского окна (или любой другой элемент внутри тела родителей) с помощью 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
}

Надеюсь, что это поможет

4b9b3361

Ответ 1

Если вы используете iframe просто для прокручиваемого содержимого, вы можете рассмотреть стилизованный div с переполнением: auto или прокруткой.

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

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

Ответ 2

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

Ответ 3

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

Ответ 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 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;
}