javascript 如何创建叠加层以在页面加载时自动加载？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18540948/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create an overlay to automatically load on page load?
提问by user2734236
I'm trying to figure out how to create an overlay box that automatically loads on the page load and then has an okay button for the user to click to make it go away.
我试图弄清楚如何创建一个在页面加载时自动加载的覆盖框，然后有一个好的按钮供用户单击以使其消失。
I'm looking for something similar to this http://laurenconrad.com/
我正在寻找与此类似的东西http://laurenconrad.com/
See how the overlay pops up with a pink semi transparent background and a sign up box in the center? That doesn't show up every time though, only once a week I believe. I'm looking for something similar to that to give the option of my site visitors to subscribe.
看看叠加层是如何弹出的，带有粉红色的半透明背景和中心的注册框？但这并不是每次都出现，我相信每周只有一次。我正在寻找类似的东西，让我的网站访问者可以选择订阅。
I've been trying to follow various tutorials but nothing seems to be working very well. I don't know much about overlays or scripts so any help with the CSS, HTMl, and the script would be super helpful! Thank you!
我一直在尝试遵循各种教程，但似乎没有什么效果很好。我不太了解叠加层或脚本，所以任何有关 CSS、HTMl 和脚本的帮助都会非常有帮助！谢谢！
Rebecca
丽贝卡
回答by Andrew Wells
To do this, i'd use jQuery. Create the overlay in HTML/CSS and place the overlay div at the beginning of the tag.
为此，我将使用 jQuery。在 HTML/CSS 中创建覆盖并将覆盖 div 放在标记的开头。
$(document).ready(function() {
// check cookie
var visited = $.cookie("visited")
// load overlay if they haven't visited
if (visited == null) {
$('#overlay').fadeIn();
$.cookie('visited', 'yes');
}
// set cookie
$.cookie('visited', 'yes', { expires: 1, path: '/' });
});
$('button').click(function () {
$('#overlay').fadeOut(200, "linear");
});
This code will load your div with the id "overlay" and when the hide button is clicked, the div will fade out. You could have the div fade out just by clicking the overlay div if you preferred. By using this:
此代码将使用 id“overlay”加载您的 div，当单击隐藏按钮时，div 将淡出。如果您愿意，只需单击覆盖 div 即可让 div 淡出。通过使用这个：
$('#overlay').click(function () {
$('#overlay').fadeOut(200, "linear");
});
Here's a fiddle to show you what I mean: http://jsfiddle.net/andaywells/jWcqZ/17/
这是一个向您展示我的意思的小提琴：http: //jsfiddle.net/andaywells/jWcqZ/17/
回答by ninty9notout
Start with the overlay loaded on the page but hidden.
从页面上加载但隐藏的叠加层开始。
Then use jQ's dom on ready event to show the overlay.
然后在就绪事件上使用 jQ 的 dom 来显示覆盖。
This is the simplest of overlays you can do: http://jsfiddle.net/ninty9notout/6gaND/
这是您可以执行的最简单的叠加：http: //jsfiddle.net/ninty9notout/6gaND/
$('#overlay').css({'opacity': 0, 'display': "block"});
$('#overlay').animate({'opacity': 1}, 1000).on("click", function() {
$('#overlay').animate({'opacity': 0}, 1000);
});
Enjoy!
享受！
