asp.net - Mover ModalPopup fuera del IFrame. ¿Posible?

modalpopupextender

Question

Tengo un iframe dentro de mi página principal. Hay una variante modal dentro de la página iframe. Entonces, cuando se muestra el modalpopup, el padre del modalpopup es el cuerpo del iframe y el cuerpo principal de la página principal. Por lo tanto, la superposición solo cubre el iframe y no toda la página.

Intenté mover el modalpopup del iframe al elemento principal del cuerpo de Windows (o cualquier otro elemento dentro del cuerpo de los padres) usando jQuery. Recibo un error de argumento no válido.

¿Cómo se muestra un modalpopup desde una página dentro de iframe y debe abarcar todo el documento, también el documento principal?

Actualizar:

Dado que pocos usuarios están interesados ​​en lograr el mismo comportamiento ... aquí está la solución

La mejor solución que sugeriría sería tener el modalpopup en la página principal ... y luego invocarlo desde el iframe ... decir algo como esto ...

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

Espero eso ayude

Answer 1

Si está utilizando el iframe simplemente para contenido desplazable, puede considerar un div con estilo con overflow: auto o scroll , en su lugar.

Una configuración como esta hace que sea más fácil modificar la apariencia de toda la página, ya que no está trabajando con varios documentos, cada uno de los cuales tiene esencialmente su propio espacio de ventana dentro de la página. Puede omitir parte de la comunicación entre fotogramas y puede ser más fácil mantener la información sincronizada si necesita hacerlo.

Esto puede no ser adecuado para todas las situaciones y puede requerir ajax (o modificar el dom con javascript) para cambiar los contenidos div en lugar de solo cargar un documento diferente en el iframe. Además, algunos navegadores móviles más antiguos, como las versiones de Android Froyo, no manejan bien los divs desplazables.

Answer 2

Usted respondió su propia pregunta en su actualización. El diálogo modal debe vivir en la página principal e invocarse desde el iframe. Su única otra opción es utilizar un div desplazable en lugar de un iframe.

Answer 3

No es posible de la manera que estás preguntando. Piénselo de esta manera: un iframe es una ventana separada. No puede (por el momento) mover un div en una página web a otra.

Answer 4

He hecho esto escribiendo un pequeño código para jQuery, ver más abajo, quizás esto pueda ayudar:

NOTA: asegúrese de estar haciendo en el mismo dominio

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