Hộp thoại JQuery Modal không có lớp phủ

Question

Tôi đang cố gắng hiển thị "hộp thoại bộ tải ajax" chặn giao diện (phương thức) nhưng không có lớp phủ.

Đây là cách tôi khởi tạo hộp thoại:

$("<div></div>").dialog({ 
     modal: true, 
     dialogClass: "noOverlayDialog", 
     autoOpen: false, //opened later 
     ... 
    }); 

tôi thêm CSS sau đây để ẩn các lớp phủ:

.ui-dialog.noOverlayDialog + .ui-widget-overlay { opacity: 0 !important; } 

Tuy nhiên, khi tôi gọi dialog("open") nhấp nháy lớp phủ sau đó biến mất, như thể Tôi đã ẩn nó bằng cách sử dụng Javascript. Hiệu ứng tương tự bằng cách sử dụng display:none; hoặc visibility:hidden.

Để đảm bảo đó là css xóa lớp phủ và không phải cái gì khác, tôi đã xóa dòng css và chắc chắn đủ lớp phủ hiện luôn hiển thị.

Tại sao điều này lại xảy ra? Tôi nghĩ CSS tĩnh không nên có loại hành vi này và lớp phủ phải được ẩn ngay lập tức mà không cần flash.

Nếu tôi không thể tìm thấy giải pháp trực quan, có thể thay thế sẽ đặt tùy chọn phương thức thành sai để ngăn lớp phủ lại với nhau và sau đó viết mã để có được hành vi bình thường. Dù bằng cách nào, tôi cần một giải pháp làm việc.

Answer 1

tôi có cảm giác rằng những gì bạn đang nhìn thấy là hình ảnh nền lớp phủ render một thời gian ngắn trước khi hiệu quả, minh bạch (không được hỗ trợ trong tất cả các trình duyệt, bằng cách này) có thể kick vào.

.ui-widget-overlay { background: none !important; } 

Trên đây nên làm việc. Như ý kiến ​​ở trên đã nêu, mặc dù, đăng một ví dụ trên máy chủ của bạn hoặc JSFiddle sẽ cho phép một chẩn đoán cụ thể hơn.

Answer 2

Tôi đã làm cho nó hoạt động trên jsFiddle. Try this link

<div id="dialog"> 
    <h3>Here is the dialog content</h3> 
    <p id="dialogContent"></p> 
</div> 
<button onclick="$('#dialog').dialog('open');">open</button> 

<script> 
    $(document).ready(function(){ 
     $('#dialog').dialog({ 
      title: 'My dialog', 
      dialogClass: "noOverlayDialog", 
      autoOpen:false, 
      modal: true, 
      open: function(event,ui){ 
       $('.noOverlayDialog').next('div').css({'opacity':0.0}); 
      } 
     }); 
    }); 
</script> 

Answer 3

Lớp phủ được jQuery sử dụng có lớp ui-widget-overlay. Vì vậy, Bao gồm các quy tắc css dưới đây trong css của bạn,

.ui-widget-overlay { 
    opacity: 0; 
    filter: alpha(opacity=0); /* IE8 and lower */ 
} 

DEMO:http://jsfiddle.net/Lhwsq/

Lưu ý:

1. Hãy chắc chắn rằng nguyên tắc này được bao gồm sau jQuery css hoặc bất kỳ plugin nào css.
2. Kiểu này sẽ được áp dụng cho bất kỳ hộp thoại nào trong cùng một trang.

Để làm cho nó làm việc trên bất kỳ hộp thoại cụ thể, xem https://stackoverflow.com/a/14586175/297641

Answer 4

Một lựa chọn sẽ được tạo thêm một lớp overlay-hidden và thêm nó vào lớp phủ khi hộp thoại là opened, loại bỏ nó một lần nữa khi nó closed.Điều đó sẽ đảm bảo các hộp thoại khác trong trang (có thể đòi hỏi một lớp phủ có thể nhìn thấy) tiếp tục hoạt động bình thường:

open: function(event,ui){ 
    $('.ui-widget-overlay').addClass('overlay-hidden'); 
}, 
beforeClose: function(event,ui){ 
    $('.ui-widget-overlay').removeClass('overlay-hidden'); 
} 

Lớp overlay-hidden sẽ ghi đè lên opacity-0, như suggested bởi @Vega:

.overlay-hidden { 
    opacity: 0.0; 
    filter: alpha(opacity=0); /* IE8 and lower */ 
} 

Working example tại jsFiddle (được điều chỉnh từ @ ShadeTreeDeveloper answer).

Answer 5

Không có câu trả lời nào dưới đây phù hợp với tôi nhưng cuối cùng tôi đã tìm ra giải pháp.

Hóa ra hộp thoại ban đầu được trả lại bên trong một container gọi .ui-effects-wrapper với lớp phủ sau container không hộp thoại:

<div class="ui-effects-wrapper" ... > 
    <div class="ui-dialog" .... > 
    </div> 
</div> 
<div class="ui-widget-overlay" ...> </div> 

Vì vậy chọn của tôi .ui-dialog.noOverlayDialog + .ui-widget-overlay sẽ chỉ có hiệu lực sau khi container hiệu ứng đã được gỡ bỏ. Để giải quyết vấn đề tôi cần để nhắm mục tiêu cả hai bộ chọn:

.ui-dialog.noOverlayDialog + .ui-widget-overlay, 
.ui-effects-wrapper + .ui-widget-overlay { 
     background: none !important; 
     opacity: 0 !important; 
} 

Lưu ý, bộ chọn thứ hai là toàn cục.