nội dung DIV hiển thị trên trang thay vì JQuery Dialog

Question

Tôi đã đánh dấu DIV sau:

<div id="dialog" title="Membership Renewal"> 
Your membership is going to expire. 
</div> 

Tôi đã javascript sau đây để thực hiện JQuery:

<script type="text/javascript"> 
function showjQueryDialog() { 
    $("#dialog").dialog("open"); 
    //alert("Time to renew Membership!"); 
} 

$(document).ready(function() { 
    $("#dialog").dialog({ 
     autoOpen: false, 
     modal: true, 
     buttons: { "Renew Membership": function() { $(this).dialog("close"); } } 
    }); 
}); 
</script> 

Tôi có một asp: Button mà nằm bên trong một điều khiển và điều khiển nằm trên trang chính. Điều đầu tiên tôi nhận thấy là khi trang được tải, div được hiển thị và sau đó biến mất khi trang được tải xong. Khi tôi nhấp vào nút, nó thực hiện như sau:

if (timeSpan.Days >= 30) 
{ 
//Show JQuery Dialog Here 
ScriptManager.RegisterClientScriptBlock(this, typeof(Page), "showExpiration",  
"showjQueryDialog()", true); 
} 

Khi tôi nhấp vào nút, thay vì một hộp thoại bật lên, nội dung của div sẽ hiển thị.

Answer 1

Tôi tin rằng bạn có hai vấn đề liên quan ở đây.

Lý do DIV hiển thị khi bạn tải lần đầu tiên là do bạn chưa bảo nó. Kịch bản lệnh jQuery làm cho DIV hoạt động như một hộp thoại không chạy cho đến khi DOM DOM được tải, và cho đến khi nó sẽ không ẩn DIV. Một giải pháp đơn giản là ẩn DIV theo mặc định bằng cách sử dụng CSS.

<div id="dialog" title="Membership Renewal" style="display:none;"> 
Your membership is going to expire. 
</div> 

Nút vấn đề nhấp chuột có liên quan: RegisterClientScriptBlock sẽ ra một kịch bản chạy ngay khi nó bắt gặp, vì vậy mã jQuery có thể biến nó thành một hộp thoại đã không có cơ hội để chạy được nêu ra. Để cho nó một cơ hội để làm như vậy, bạn có thể thay đổi mã C# để sử dụng RegisterStartupScript, điều này sẽ trì hoãn việc thực thi showjQueryDialog() cho đến khi trang tải xong và mã jQuery đã có cơ hội biến DIV thành một hộp thoại.

if (timeSpan.Days >= 30) 
{ 
    //Show JQuery Dialog Here 
    ScriptManager.RegisterStartupScript(this, typeof(Page), 
     "showExpiration", "showjQueryDialog()", true); 
} 

Answer 2

đảm bảo bạn đang chỉ định đúng loại tài liệu ở đầu trang, điều này có vẻ là nguyên nhân của một số vấn đề mà tôi đã thấy.

chỉnh sửa:

cũng có, để giữ cho nó khỏi nhấp nháy ngay từ đầu bạn có thể có một cái gì đó giống như

#debug { display: none; } 

ở đâu đó trước phần tử (có khả năng nhất stylesheet của bạn hoặc trong đầu).

một điều có thể giúp là nếu bạn đặt thiết lập:

OnClientClick="showjQueryDialog(); return false;"; 

trong tải trang hoặc tương tự, như vậy bạn sẽ không cần một postback (không đồng bộ hay cách khác).

Answer 3

Lý do không hiển thị vì tài liệu có thể chưa được tải. và document.ready chưa được gọi, vì vậy hộp thoại ("mở") được gọi trước khi hộp thoại ({options}); do đó, để khắc phục điều này, chỉ cần thêm mã vào trong cuộc gọi doc.ready.

Ngoài ra, bạn chỉ tải thoại một lần, vì vậy bạn không thực sự cần để khởi tạo nó như AutoOpen: false, sử dụng màn hình hiển thị: none sau đó hiển thị nó như John Boker nói

function showjQueryDialog() { 
    $(document).ready(function() { 
    $("#dialog").dialog({ 
     modal: true, 
     buttons: { "Renew Membership": function() { $(this).dialog("close"); } }); 
    $("#dialog").show(); // sets display:block; 
    //alert("Time to renew Membership!"); 
    }); 
} 

<div id="dialog" style="display:none"> 
    <!--..--> 
</div> 

Answer 4

Tôi biết điều này đã cũ rồi. Tuy nhiên, thiết lập lớp của bạn thành giao diện người dùng jQuery được xây dựng trong ui-helper-hidden.

<div id="dialog" title="Membership Renewal" class="ui-helper-hidden"> 
    Your membership is going to expire. 
</div> 

Điều này sẽ giải quyết hành vi khách mời không mong muốn của div của bạn.