Dialog được ẩn đằng sau lớp phủ khi Modal: true trên Jquery Dialog trong ASP.net

Question

Tôi đang phát triển một số hộp thoại Jquery và thấy hộp thoại bị ẩn khi tôi đặt Modal: true. Khi thiết lập Modal: false, tôi thấy mọi thứ hoạt động như mong đợi. Hy vọng ai đó có thể giúp tôi.

<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

Tôi đã sửa nó. Không có nhiều người phàn nàn về vấn đề này. Chỉ tôi thôi à? Dù sao, đây là cách tôi đã sửa nó. Khá đơn giản khi bạn biết làm thế nào.

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

Answer 2

Bạn có thể tạo jsFiddle để tạo lại sự cố này bên ngoài môi trường của mình không? Nếu không, sau đây là một số ý tưởng ra khỏi đỉnh đầu của tôi:

Đặt javascript của bạn bên trong một khối sẵn sàng tài liệu, như vậy:

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

Thay đổi btnOpendialog là một điều khiển máy chủ non-ASP.NET . Vì tất cả những gì nó làm là mở hộp thoại jquery, nó không cần phải là một điều khiển máy chủ. Thay đổi nó thành:

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

Answer 3

Bạn cần phải ngừng sử dụng appendTo như thế này và sử dụng tùy chọn mới hộp thoại "appendTo"

như thế này:

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

Taken từ tài liệu jquery-ui http://api.jqueryui.com/dialog/#option-appendTo

Answer 4

Tôi đã thử câu trả lời được chấp nhận và nó xuất hiện để làm việc trong một số tình huống, nhưng không phải là những người khác. Sử dụng ý tưởng tương tự, đây là đoạn code tôi đã đưa ra với mã này ...

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

... mà là dựa trên thực tế là z-index của .ui-widget-overlay là 9998.

Ngoài ra, để khắc phục vấn đề nơi lớp phủ không bao gồm chiều cao đầy đủ của trang của bạn (như .ui-widget-overlay chỉ có một chiều cao của 1000%), tôi đến với điều này:

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

Answer 5

Tất cả tôi cần là z-index:1 được áp dụng cho ui-dialog. Không có z-index Tôi có thể đăng ký ui-widget-overlay để thực hiện công việc này.

Tôi đang làm điều này trong Wordpress bao gồm các tập lệnh 'jquery-ui-core', 'jquery-ui-dialog'. Đây là css có liên quan của tôi:

.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; 
}