javascript - 如何创建覆盖以在页面加载时自动加载？

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 on ready 事件来显示覆盖。

这是您可以做的最简单的覆盖：http: //jsfiddle.net/ninty9notout/6gaND/

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

享受！