Modal-thoại sẽ không che giấu về tải trang

Question

tôi đang cố gắng để tạo ra một hộp thoại modal để chỉ hiển thị nội dung (html của một số loại hoặc khác):

<script> 
$.fx.speeds._default = 1000; 
$(function() { 
    $("#dialog").dialog({ 
     autoOpen: false, 
     closeOnEscape: true, 
     modal: true, 
     position: 'center', 
     width: 800, 
     height: 600, 
     show: "blind", 
     hide: "explode" 
    }); 

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

}); 
</script> 

Khi tôi xem trang, hộp thoại là nội tuyến và không bị ẩn. Đây là html của tôi:

<div id="dialog">This is my dialog that should be hidden until called</div> 
<button id="opener">I Open the Dialog</button> 

Tôi đang làm gì sai?

Answer 1

Bạn nên thiết lập autoOpen tài sản để sai, dưới đây là một số tài liệu tham khảo

http://jqueryui.com/demos/dialog/#option-autoOpen

Dưới đây là một ví dụ

$(function() { 
    $("#dialog").dialog({ 
     closeOnEscape: true, 
     modal: true, 
     position: 'top', 
     width: 800, 
     height: 600, 
     show: "blind", 
     hide: "explode", 
     autoOpen: false ///added this line 
    }); 

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

}); 

Answer 2

Ẩn div sử dụng css như ví dụ:

<div id="dialog" style="display:none;">This is my dialog that should be hidden until called</div> 

Bây giờ nó sẽ chỉ hiển thị khi được gọi.