Okno dialogowe zostało ukryte za nakładką, gdy Modal: true w oknie dialogowym Jquery w ASP.net

Question

Zajmuję się dialogiem Jquery i stwierdziłem, że okno dialogowe było ukryte, gdy ustawiłem Modal: true. Podczas ustawiania Modal: false, stwierdziłem, że wszystko działa zgodnie z oczekiwaniami. Mam nadzieję, że ktoś może mi pomóc.

<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

Naprawiłem to. Niewiele osób narzeka na ten problem. Czy to tylko ja? W każdym razie, oto jak to naprawiłem. Bardzo proste, kiedy wiesz jak.

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

Answer 2

Czy można utworzyć aplikację jsFiddle, aby odtworzyć ten problem poza środowiskiem? Jeśli nie, oto kilka pomysłów z góry na głowie:

Połóż JavaScript wewnątrz dokumentu gotowego bloku, tak jak poniżej:

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

Zmień btnOpendialog być non-ASP.NET kontrola serwera . Ponieważ wszystko, co robi, jest otwarte okno dialogowe jquery, nie musi to być kontrola serwera. Zmień to na:

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

Answer 3

Musisz przestać używać appendTo tak i skorzystać z nowej opcji dialogowe "appendTo"

tak:

Zrobione z dokumentacji jQuery-UI

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

http://api.jqueryui.com/dialog/#option-appendTo

Answer 4

Próbowałem zaakceptowanej odpowiedzi i okazało się, że działa w niektórych sytuacjach, ale nie w innych. Stosując tę ​​samą ideę, jest to kod wymyśliłem tego kodu ...

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

... która opiera się na fakcie, że z-index of .ui-widget-overlay jest 9998.

Dodatkowo, aby naprawić problem, gdzie nakładka nie obejmuje pełną wysokość swojej stronie (jak .ui-widget-overlay ma tylko wysokość 1000%), wpadłem na to:

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

Answer 5

All I potrzeba była z-index:1 zastosowana do ui-dialog. Nie mogłem się ubiegać o , aby to zadziałało.

Robię to w Wordpress, w tym skrypty "jquery", "jquery-ui-core", "jquery-ui-dialog". Oto mój istotne 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; 
}