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

How to create an overlay to automatically load on page load?

本文关键字：加载 何创建 创建 覆盖      更新时间：2023-09-26

我正试图找出如何创建一个覆盖框，该覆盖框在页面加载时自动加载，然后有一个OK按钮供用户单击以使其消失。

我在找类似的东西http://laurenconrad.com/

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

我一直在尝试学习各种教程，但似乎没有什么效果很好。我对覆盖层或脚本了解不多，所以CSS、HTM1和脚本的任何帮助都会非常有用！非常感谢。

Rebecca

要做到这一点，我会使用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/

从页面上加载但隐藏的覆盖开始。

然后使用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);
});

享受吧！

相关文章：