如何创建覆盖层以在页面加载时自动加载？ [已关闭]

Question

我试图弄清楚如何创建一个覆盖框，该框会在页面加载时自动加载，然后有一个“确定”按钮供用户单击以使其消失。

我正在寻找与此类似的东西http://laurenconrad.com/

看到叠加层是如何弹出的，带有粉红色半透明背景和中间的注册框吗？不过，这并不是每次都会出现，我相信每周只会出现一次。我正在寻找类似的东西，让我的网站访问者可以选择订阅。

我一直在尝试遵循各种教程，但似乎没有什么效果很好。我对叠加层或脚本了解不多，因此任何有关 CSS、HTMl 和脚本的帮助都会非常有帮助！

Answer 1

为此，我将使用 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");
});

此代码将使用 id“overlay”加载您的 div，当单击隐藏按钮时，div 将淡出。如果您愿意，只需单击覆盖 div 即可使 div 淡出。通过使用这个：

$('#overlay').click(function () {
    $('#overlay').fadeOut(200, "linear");
});

这是一个小提琴来向您展示我的意思： http://jsfiddle.net/andaywells/jWcqZ/17/

Answer 2

从加载到页面上但隐藏的叠加层开始。

然后在就绪事件上使用jQ的dom来显示覆盖。

这是您可以执行的最简单的叠加：http://jsfiddle.net/ninty9notout/6gaND/

$('#overlay').css({'opacity': 0, 'display': "block"});
$('#overlay').animate({'opacity': 1}, 1000).on("click", function() {
    $('#overlay').animate({'opacity': 0}, 1000);
});

享受吧！