Hộp thoại JQuery được hiển thị ngay lập tức trên trang tải

Question

Tôi đã tạo một trang có hộp thoại dựa trên JQuery sử dụng chức năng giao diện người dùng JQuery tiêu chuẩn. Tôi làm điều này với chức năng hộp của JQuery ... không có gì đặc biệt cả. Dưới đây là HTML của tôi cho hộp thoại:

<div id = "myDialog"> 
    <!-- ... more html in here for the dialog --> 
</div> 

Sau đó, JQuery gọi trong javascript rằng biến đổi <div> để một hộp thoại:

// pruned .js as an example of kicking up a JQuery dialog 
    $('#myDialog').dialog({ 
     autoOpen: false, 
     title: 'Title here', 
     modal: true 
     } 
    }); 

Một lần nữa, đồng bằng-vani JQuery. Vì vậy, bạn bắt đầu trình hướng dẫn này bằng cách nhấp vào liên kết trên trang gốc và sau đó sẽ sinh ra một hộp thoại JQuery có một đoạn HTML quan trọng bao gồm hình ảnh, v.v.

Khi tôi tiếp tục phát triển trang này, tôi bắt đầu chú ý khi tôi tải trang trong trình duyệt mà các thẻ <div> tôi đã đưa vào đó, việc biến đổi JQuery thành các hộp thoại sẽ được hiển thị rất ngắn gọn. Sau đó, trang sẽ hoạt động như mong đợi. Nói cách khác, hộp thoại sẽ không bị ẩn, hộp thoại sẽ được hiển thị ngắn gọn trong dòng trong trang. Khá xấu xí và không chuyên nghiệp! Nhưng sau một giây, trang sẽ hiển thị chính xác và trông giống như tôi mong đợi/muốn.

Theo thời gian, khi kích thước trang tăng lên, thời gian trang sẽ vẫn hiển thị không chính xác. Tôi đoán là công cụ dựng hình của trình duyệt đang hiển thị trang khi nó đang tải, sau đó cuối cùng nó khởi động JQuery sẽ biến đổi <div> thành một hộp thoại. Hàm JQuery này sau đó sẽ biến đổi đơn giản <div> thành một hộp thoại JQuery và ẩn nó (vì tôi có thuộc tính autoOpen được đặt thành false). Một số trình duyệt <ho> IE </ho > hiển thị nó dài hơn các loại khác. Hộp thoại lớn-ish của tôi giờ đây làm cho trang hiển thị không chính xác trong khoảng 1 giây ... YUCK!

Answer 1

Bạn có thể thêm một số CSS do đó, nó theo mặc định ẩn, không có mã onload cần thiết:

#myDialog { display: none; } 

Với điều này, không có mã số khác là cần thiết, khi bạn mở hộp thoại nó sẽ đảo ngược kiểu này ... do đó không có gì bổ sung để chạy trên document.ready.Ngoài ra, nếu bạn có rất nhiều hộp thoại, cung cấp cho nó một lớp, như thế này:

<div id="myDialog" class="dialog"></div> 

Với CSS này:

.dialog { display: none; } 

Trong hầu hết các trường hợp, jQuery sử dụng thuộc tính display phong cách để che giấu điều gì đó, do đó, việc sử dụng tính năng này ban đầu sẽ ẩn nội dung nào đó sẽ hoạt động với bất kỳ nội dung nào bạn muốn sử dụng sau này, cho dù đó là hộp thoại, đơn giản là .fadeIn(), v.v.

Answer 2

Tôi đã đưa ra một giải pháp cho vấn đề này hoạt động OK, nhưng Tôi tự hỏi nếu ai đó biết một cách tốt hơn.

Vấn đề là trình duyệt hiển thị DOM khi nó tải nó, sau đó kích hoạt JQuery .js ở cuối mà ẩn nó. Vì vậy, điều tôi đang làm là tắt chế độ hiển thị trong thẻ cha <div> để tất cả nội dung của hộp thoại bị ẩn theo mặc định, sau đó, hãy chuyển thẻ cha <div> thành .js.

<div id="bodyDiv" style="visibility:hidden"> 
    <div id = "myDialog"> 
     <!-- ... more html in here for the dialog --> 
    </div> 
</div> 

sau đó .js JQuery:

<script type="text/javascript"> 

$(document).ready(function() { 
    //turn the visibility on last thing 
    $("#bodyDiv").attr("style", "visibility:visible"); 
}); 
</script> 

như bạn có thể nhìn thấy, tôi chỉ theo mặc định tắt khả năng hiển thị của tất cả mọi thứ để trang này hiển thị w/o hiển thị nội dung hộp thoại, sau đó tôi lần lượt khả năng hiển thị trên một lần nữa. Đây không phải là giải pháp hoàn hảo vì nó vẫn có thể khiến trang hoạt động hài hước trong một giây nhưng ít nhất hộp thoại HTML không được hiển thị trong dòng. Các UX với sửa chữa này là chấp nhận được, mặc dù không lý tưởng.

Answer 3

Tôi sử dụng bộ chọn CSS3 với tên đặt tên là &. Tất cả các hộp thoại của tôi là <div> phần tử và id luôn kết thúc bằng "hộp thoại". sau đó tôi sử dụng CSS này:

div[id$=dialog] { display: none; } 

Một hộp thoại mẫu:

<div id="my-sample-dialog" title="Sample Dialog"> 
     <span>I'm invisible!</span> 
</div> 

Trong trường hợp CSS3 không phải là một lựa chọn, bạn có thể sử dụng CSS2 để đạt được kết quả tương tự, nhưng bạn phải cẩn thận hơn không để sử dụng biệt danh thoại trong bất kỳ <div> id không nhằm phản ánh được ẩn:

div[id~=dialog] { display: none; } 

và thiết lập id thoại của bạn để một cái gì đó giống như "hộp thoại mẫu của tôi"

Answer 4

Nếu bạn đang sử dụng một "cửa sổ bật lên" chứ không phải là một "hộp thoại" Tôi đã phải làm như sau:

HTML

<div data-role="popup" class="popup"> 
    <!-- CONTENT --> 
</div> 

CSS

.popup { display:none; } 
.ui-popup-container .popup { display:block; } 

tôi ban đầu ẩn các cửa sổ bật lên bằng cách sử dụng display: none và sau khi jQueryUI kết thúc popup trong một container, phong cách khác được ưu tiên.