2009-11-24 15 views
10

Ich verwende jQuery UI-Dialog für modale Popups. Ich habe auch einige iframes in meiner Seite. Der iFrame (z-Index = 1500) befindet sich auf der übergeordneten Seite (z-index = 1000). Ich öffne den modalen Dialog von der Elternseite. Ich versuche den Z-Index mit $ ('modal') zu setzen. Dialog ('option', 'zIndex', 3000); aber das funktioniert nicht. Ich habe auch versucht, stack: true (um es oben zu stapeln) und .dialog ('moveToTop'), aber sie scheinen nicht zu funktionieren. HierjQuery modal Dialog über iFrame

ist der Code: Geordnete Seite:

Stylesheet: von "css/ui-Dunkelheit/jquery-ui-1.7.2.custom.css" Skripte: 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%}

Ich bin ein iframe und ich bin böse

+0

Update: die 2 bereitgestellten Lösungen funktionierten nicht. Ich benutze http://www.west-wind.com/weblog/posts/876332.aspx, um den maximalen Z-Index dynamisch zu finden und ihn dann zur Entwurfszeit etwas wie $ (modal) .dialog ({/ * andere Eigenschaften * /, zIndex: $ .maxZIndex() + 1,}) – ram

Antwort

5

ich this post bin mit dem max Z-Index dynamisch zu finden und es dann wie beim Entwurf etwas zuweisen:

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

Wie wäre es

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

jQuery UI Dialog rendert ein DIV mit der Klasse ui-dialog und es wird das Elternteil Ihres ursprünglichen DIV, daher habe ich nearest() verwendet, um es zu finden (nicht direkt auf die Klasse verweisen, falls es mehr Dialoge auf der Seite gibt).

0

Haben Sie versucht $('modal').dialog('zIndex', 11000)?

+1

Ich versuchte $ ('modal') .dialog ('option', 'zIndex', 11000); aber nicht $ ('modal') .dialog ('zIndex', 11000); Lass es mich versuchen – ram