Cuadro de diálogo modal de jQuery sobre iFrame

Question

Estoy usando el cuadro de diálogo de la interfaz de usuario jQuery para ventanas emergentes modales. También tengo algunos iframes en mi página. El iFrame (z-Index = 1500) se encuentra en la parte superior de la página principal (z-index = 1000). Abro el cuadro de diálogo modal desde la página principal. Estoy tratando de establecer el índice z usando $ ('modal'). Diálogo ('opción', 'zIndex', 3000); Pero esto no está funcionando. También probé stack: true (para apilarlo en la parte superior) y .dialog ('moveToTop') también, pero parece que no funcionan.

Aquí está el código: página Padres:

usando hoja de estilo: de "css/ui-oscuridad/jquery-ui-1.7.2.custom.css" el uso de scripts: jquery-1.3.2 .min.js & & jquery-ui-1.7.2.custom.min.js

<script type="text/javascript" language="javascript"> 

    function TestModal() { 
    var modal = "<div id='modal'>Hello popup world</div>"; 
    $(modal).dialog({ 
     modal: true, 
     title: 'Modal Popup', 
     zIndex: 12000, // settin it here works, but I want to set it at runtime instead of setting it at design time 
     close: function() { 
     setTimeout(TestModal, 5000); 
     $(this).remove(); 
     } 
    }); 

    $('modal').dialog('option', 'zIndex', 11000); // these dont work 
    $('modal').dialog('moveToTop'); // these dont work 
    $('modal').dialog('option', 'stack', true); // these dont work 
    } 
    /** Run with defaults **/ 
    $(document).ready(function() { 

    TestModal(); 

    }); 

    </script> 
<div> 
Hello World 
<br /> 

</div> 

<iframe src="blocker.htm" width="100%" height="100%" frameborder="0" scrolling="no" name="myInlineFrame" 
style="z-index:10000;background-color:Gray;position:absolute;top:0px;left:0px" ALLOWTRANSPARENCY="false"> 
</iframe> 

iframe: blocker.htm

.Wrap {width: 100%; altura: 100%}

Soy un iframe y yo soy el mal

Answer 1

estoy usando this post para encontrar el máximo índice Z de forma dinámica y asignarlo a la hora del diseño algo como:

$(modal).dialog({ /* other properties */ , zIndex: $.maxZIndex()+ 1, }) 

Answer 2

¿Qué tal

$('#modal').closest('div.ui-dialog').css('z-index', '3000') 

jQuery UI Dialog representa un DIV con clase ui-dialog y se convierte en el padre de su DIV original, por lo tanto, usé más cercano() para encontrarlo (no haciendo referencia directamente por clase en caso de que haya más cuadros de diálogo en la página).

Answer 3

¿Has probado $('modal').dialog('zIndex', 11000)?

Answer 4

me escribió una extensión que haga lo que es creo que en realidad se está deseando. ..

http://plugins.jquery.com/project/jquery-framedialog