Mover ModalPopup fuera del IFrame. ¿Posible?

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?

Actualización:

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

La mejor solución que yo sugeriría sería tener la ModalPopup en la página principal. . e invocarla 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 que ayuda

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 el aspecto de toda la página ya que no está trabajando con varios documentos que tienen esencialmente cada uno 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 de 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

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 la forma en que está 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

No he hecho esto escribiendo un pequeño código para jQuery véase más adelante tal vez esto puede ayudar:

NOTA: Asegúrese de que está haciendo 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; 
}