Question

我正在试图弄清楚如何创建一个自动加载页面加载的覆盖框，然后有一个好的按钮供用户点击以使其消失。

类似的内容

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

我一直在尝试遵循各种教程，但似乎没有什么工作得很好。我对覆盖或脚本了解不多，所以对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);
});

享受！

如何创建覆盖以自动加载页面加载？

2 个答案: