jquery show overlay div on page load

Question

我想做一些我見過很多onclick的例子，但我想在用戶轉到頁面時加載div。甚至當您嘗試插入超鏈接時，StackOverflow也會執行此操作（onlcick）。

如何在使用jquery加載頁面時創建div覆蓋圖？

順便說一句，我已經搜索了一個體面的金額，但無法找到簡單的東西，我的jquery簡單的頭腦可以弄清楚。

感謝您的幫助。

Answer 1

我覺得你在說什麼叫做「模態」對話框。

jQuery有很多模態對話框插件。我最喜歡的是「simplemodal」。

它在這裏可用：http://www.ericmmartin.com/projects/simplemodal/ 樣品也很棒！

從simplemodal網站：

作爲一個鏈接jQuery的功能，你可以調用一個jQuery元素的模態（）函數，並使用該元素的內容顯示一個模式對話框。例如：

$（「＃element-id」）。modal（）;

Answer 2

$(document).ready(function() { 
     $thing = $("<div class='newDiv'>"); 
     $("body").append($thing); 
}); 

Answer 3

看一看jQuery UI對話框控件。或者搜索「jQuery lightbox」。總體思路是使用絕對定位的div設置爲display:none，並在需要時將其更改爲display:block。

Answer 4

$(function(){ // this will run when the document.ready event fires 
    $("#myDivOverlay").show(); // this will show a div whose id is myDivOverlay 
}); 

這有幫助嗎？

Answer 5

我組合了這兩個東西How to create a stunning and smooth popup using jQuery和Modal box on page load with jquery fancy box and cookie plugin。

Answer 6

你可以試試這個。

<script type="text/javascript"> 
$(document).ready(function() 
{ 
    $(window).load(function() 
     { 
     $('#loading').fadeOut(3000); //fadeout the #loading div after 2000 milliseconds 
     }); 

    $('#loading').css('height','100%'); //Put 100% height to the div 

}); 
</script> 

See full tutorial and download source code。