JQuery Dialog phương thức lựa chọn không làm việc

Question

Đây là mã HTML:

<div id="dialog" title="lala" style="display:none;"> 
     <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> 
</div> 

Đây là hoạt Javascript

$bb('#addTopicButton').live('click',function() { 

    $bb("#dialog").dialog({ modal:true, closeOnEscape: false, draggable:false, resizable:false }); 

     }); 

Tại sao phương thức không hoạt động? Khi nó được mở, tôi vẫn có thể nhấp vào các liên kết khác trên trang và làm những việc trong nền.

Thanks a lot

UPDATE: Có vẻ như được làm việc mặc dù. Chỉ có các liên kết hoạt động trong nền và làm việc. Làm cách nào để vô hiệu hóa mọi thứ, bao gồm cả các liên kết?

Answer 1

Có thể bạn chỉ cần bao gồm CSS giao diện người dùng jQuery vào trang của mình.

Google có này trên CDN của nó ở đây:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css

Lựa chọn phương thức trên hộp thoại tạo một lớp phủ dưới thoại của bạn, nhưng so với phần còn lại của nội dung. Lớp phủ này cần jQuery UI CSS để hoạt động chính xác.

Answer 2

Chỉ gặp vấn đề tương tự. Tôi cần CSS, nhưng tôi không muốn tất cả. Vì vậy, tôi chỉ cần sao chép dán phần này trong mã CSS của riêng tôi:

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

Answer 3

Thêm chỉ .ui-widget lớp phủ để css của bạn sẽ làm cho lớp phủ xuất hiện ở phía trên hoàn tất, và thậm chí cả hộp thoại sẽ không sử dụng được.

Do đó, lớp .ui-front quá nên được bổ sung:

.ui-widget-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 
.ui-front { 
    z-index: 100; 
}