jQuery jquery在页面加载时显示覆盖div

jquery show overlay div on page load

提问by mikepreble

I want to do something that I've seen many examples of onclick, but I want to load a div when a user goes to the page. Even StackOverflow does this (onlcick) when you try to insert a hyperlink.

我想做一些我看过很多 onclick 示例的事情，但是我想在用户转到页面时加载一个 div。当您尝试插入超链接时，甚至 StackOverflow 也会这样做（onlcick）。

How can I make a div overlay when a page loads using jquery?

使用 jquery 加载页面时，如何制作 div 叠加层？

BTW, I've searched around a decent amount but can't find something simple that my jquery simple mind can figure out.

顺便说一句，我已经搜索了相当多的内容，但找不到我的 jquery 简单的头脑可以弄清楚的简单内容。

Thanks for your help.

谢谢你的帮助。

采纳答案by Scott Rippey

I think what you're talking about is called a "modal" dialog.

我认为你所说的被称为“模态”对话框。

There are many modal dialog plugins for jQuery. My favorite is "simplemodal".

jQuery 有许多模态对话框插件。我最喜欢的是“简单模式”。

It's available here: http://www.ericmmartin.com/projects/simplemodal/The samples are great too!

可在此处获得：http: //www.ericmmartin.com/projects/simplemodal/示例也很棒！

From the simplemodal site:

从 simplemodal 网站：

As a chained jQuery function, you can call the modal() function on a jQuery element and a modal dialog will be displayed using the contents of that element. For example:

$("#element-id").modal();

作为链接的 jQuery 函数，您可以在 jQuery 元素上调用 modal() 函数，并且将使用该元素的内容显示模态对话框。例如：

$("#element-id").modal();

回答by James Allardice

Have a look at jQuery UIDialog widget. Or search for "jQuery lightbox". The general idea is to use an absolutely positioned divset to display:none, and change it to be display:blockwhen required.

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

回答by inkedmn

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

That help?

这种帮助？

回答by jazkat

I combined these two tuts How to create a stunning and smooth popup using jQueryand Modal box on page load with jquery fancy box and cookie plugin.

我结合了这两个 tuts如何在页面加载时使用 jQuery和 Modal 框使用 jquery 花式框和 cookie 插件创建一个令人惊叹且流畅的弹出窗口。

回答by Anand Roshan

You can try this.

你可以试试这个。

<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.

查看完整教程并下载源代码。

回答by Bryan A

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