Dialog wurde hinter Overlay versteckt, wenn Modal: True auf Jquery Dialog in ASP.net

Question

Ich entwickle einige Jquery-Dialog und fand das Dialogfeld wurde ausgeblendet, wenn ich Modal: true. Beim Einstellen von Modal: false habe ich festgestellt, dass alles wie erwartet funktioniert. Hoffe jemand kann mir helfen.

<asp:Button ID="btnOpendialog" runat="server" Text="Button" ClientIDMode="Static" /> 

<div id="dialog"> 

<h1>Test</h1> 
    <asp:Button ID="btnClickfromDialog" runat="server" Text="Button" /> 

</div> 

$(function() { 
    $("#btnOpendialog").click(function (e) { 
     $("#dialog").dialog("open"); 
     return false; 
    }); 

    $("#dialog").dialog({ 
     height: 200, 
     modal: true, 
     autoOpen: false, 
     open: function() { 
      $(this).parent().appendTo($("form:first")); 
     }        
    }); 
}); 

Answer 1

Ich reparierte es. Es gibt nicht viele Leute, die sich über dieses Problem beschweren. Ist es nur ich? Wie auch immer, hier habe ich es behoben. Ganz einfach, wenn du weißt wie.

.ui-widget-overlay 
{ 
     z-index: 0; 
} 

Answer 2

Können Sie ein jsFiddle erstellen, um dieses Problem außerhalb Ihrer Umgebung neu zu erstellen? Wenn nicht, sind hier einige Ideen aus der Spitze von meinem Kopf:

innerhalb eines Dokuments bereit Blockes Legen Sie Ihre Javascript, etwa so:

$(document).ready(function() { 
// Your javascript here... 
}); 

ändern btnOpendialog eine non-ASP.NET Server Kontrolle zu sein . Da es nur den jquery-Dialog öffnet, muss es kein Server-Steuerelement sein. Ändern Sie es zu diesem:

<input type="button" id="btnOpendialog" value="Button" /> 

Answer 3

Sie müssen die neue Dialogoption "appendTo"

wie dies mit appendTo wie diese und verwenden stoppen:

$(".selector").dialog({ appendTo: "#someElem" }); 

von jquery-ui Dokumentation Genommen http://api.jqueryui.com/dialog/#option-appendTo

Answer 4

Ich versuchte die akzeptierte Antwort und es schien in einigen Situationen zu funktionieren, aber nicht in anderen. Unter Verwendung der gleichen Idee, das ist der Code, den ich mit diesem Code kam ...

.ui-dialog { z-index: 9999 !important; }

... die auf der Tatsache beruht, dass die Z-Index von .ui-widget-overlay9998 ist.

Zusätzlich das Problem zu beheben, wo die Überlagerung nicht die volle Höhe der Seite abdeckt (wie .ui-widget-overlay nur eine Höhe von 1000% hat), kam ich mit auf den Punkt:

.ui-widget-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; }

Answer 5

Alles, was ich Notwendigkeit wurde z-index:1 auf ui-dialog angewendet. Es gab keine z-index Ich könnte auf ui-widget-overlay anwenden, um diese Arbeit zu machen.

Ich mache das in Wordpress einschließlich der Skripte 'jquery', 'jquery-ui-core', 'jquery-ui-dialog'. Hier ist meine relevante CSS:

.ui-widget-overlay {  
    position: absolute; 
    top: 0; 
    left: 0; 
    width:100%; 
    height:100%; 
    background: #aaaaaa; 
    opacity: 0.3; 
}  

.ui-dialog {  
    background-color: #FFFFFF;  
    overflow: hidden; 
    z-index:1; 
}