Movendo ModalPopup Fora do IFrame. Possível?

Question

Eu tenho um iframe dentro da minha página principal. Há uma ModalPopup dentro da página iframe. Assim, quando o ModalPopup é mostrado, o pai do ModalPopup é o corpo iframe eo corpo da página pai principal. Assim, a sobreposição cobre apenas o iframe e não toda a página.

Eu tentei mover o ModalPopup do iframe para o elemento do corpo janelas do pai (ou qualquer outro elemento dentro do corpo pais) usando jQuery. Estou recebendo um erro de argumento inválido.

Como posso mostrar uma ModalPopup partir de uma página dentro iframe e deve cobrir todo o documento, documento pai também?

Update:

Uma vez que alguns usuários estão interessados ??em conseguir o mesmo comportamento .. aqui é a solução

A melhor solução que eu gostaria de sugerir seria ter o ModalPopup na página principal .. e, em seguida, invocá-lo a partir do iframe .. dizer algo como isso ..

/* 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
}

Hope isso ajuda

Answer 1

Se você estiver usando o iframe simplesmente por conteúdo de rolagem que você pode considerar uma denominada div com overflow:. Auto ou rolagem , em vez

A configurar como isso torna mais fácil para modificar a aparência da página inteira desde que você não está trabalhando com vários documentos que cada essencialmente têm o seu próprio espaço da janela dentro da página. Você pode ignorar algumas das comunicações cross-frame e pode ser mais fácil para manter as informações em sincronia se você precisar fazer isso.

Esta pode não ser adequado para todas as situações e pode exigir ajax (ou modificar o DOM com javascript) para alterar o conteúdo de div em vez de apenas colocar um documento diferente no iframe. Além disso, alguns navegadores móveis mais antigos, como o Android Froyo constrói não lidar com divs rolagem bem.

Answer 2

Você respondeu sua própria pergunta em sua atualização. A caixa de diálogo modal precisa para viver na página pai e invocado a partir do iframe. Sua única outra opção é usar uma div rolagem em vez de um iframe.

Answer 3

Não é possível a maneira que você está pedindo. Pense nisso desta maneira: um iframe é uma janela separada. Você não pode (por enquanto) mover uma div em uma página da web para outro.

Answer 4

Eu tenho feito isso por escrever um pequeno código para jQuery veja abaixo talvez isso pode ajudar:

NOTA: Certifique-se que você está fazendo no mesmo domínio

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