Question

我想做一些我见过很多onclick的例子，但我想在用户访问页面时加载div。当您尝试插入超链接时，甚至StackOverflow都会执行此操作（onlcick）。

如何在使用jquery加载页面时进行div叠加？

顺便说一句，我已经搜索了不少数量，但找不到简单易懂的东西，我的jquery简单的头脑可以弄明白。

感谢您的帮助。

Answer 1

我认为你所谈论的内容被称为“模态”对话框。

jQuery有很多模态对话框插件。我最喜欢的是“simplemodal”。

可在此处找到：http://www.ericmmartin.com/projects/simplemodal/ 样品也很棒！

来自simplemodal网站：

作为一个链式jQuery函数，您可以在jQuery元素上调用modal（）函数，并使用该元素的内容显示模态对话框。例如：

$（ “＃元件-ID”）的模态（）;

Answer 2

查看jQuery UI Dialog小部件。或者搜索“jQuery lightbox”。一般的想法是使用绝对定位的div设置为display:none，并在需要时将其更改为display:block。

Answer 3

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

那有帮助吗？

Answer 4

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

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

jquery在页面加载时显示叠加div

6 个答案: