2009-11-24 17 views
10

Sto utilizzando la finestra di dialogo dell'interfaccia utente jQuery per i popup modali. Ho anche alcuni iframe nella mia pagina. L'iFrame (z-Index = 1500) si trova in cima alla pagina padre (z-index = 1000). Apro la finestra di dialogo modale dalla pagina padre. Sto cercando di impostare lo z-index usando $ ('modal'). Dialog ('option', 'zIndex', 3000); ma questo non funziona Ho anche provato lo stack: true (per impilarlo in cima) e .dialog ('moveToTop'), ma non sembrano funzionare.jQuery Dialogo modale su iFrame

Ecco il codice: pagina padre :

utilizzando foglio di stile: da "css/ui-buio/jquery-ui-1.7.2.custom.css" utilizzando script: 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%; height: 100%}

Sono un iframe e io sono il male

+0

aggiornamento: le 2 soluzioni fornite non hanno funzionato. Sto usando http://www.west-wind.com/weblog/posts/876332.aspx per trovare il massimo Z-index in modo dinamico e quindi assegnarlo in fase di progettazione qualcosa come $ (modale) .dialog ({/ * altre proprietà * /, zIndex: $ .maxZIndex() + 1,}) – ram

risposta

5

Sto usando this post per trovare il massimo Z-index in modo dinamico e quindi assegnare è in fase di progettazione una cosa del genere:

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

Come su

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

jQuery UI Dialog esegue il rendering di un DIV con la classe interfaccia utente e diventa il genitore del DIV originale, quindi ho usato più vicino() per trovarlo (senza fare riferimento direttamente alla classe nel caso in cui ci siano più finestre di dialogo nella pagina).

0

Hai provato $('modal').dialog('zIndex', 11000)?

+1

Ho provato $ ('modal'). dialog ('option', 'zIndex', 11000); ma non $ ('modal'). dialog ('zIndex', 11000); fammi provare – ram

Problemi correlati