每个会话加载一次网站上的弹出窗口

Question

我发现了一些制作javascript/jquery弹出窗口的方法.但是,有一些问题,首先,我对这两种语言并不是很好,只是初学者.

如果有任何现成的代码,用于在网站加载时打开POPUP窗口,但每个浏览器会话只打开一次.如果有人可以帮助我,这将是非常好的.

我需要简单的弹出窗口,里面只有一些文字,但弹出框设计好看,不像原始浏览器弹出窗口(如图像中),当然还有关闭按钮.

http://i.stack.imgur.com/xNWxf.png

非常感谢

Answer 1

我知道我不应该真的这样做,并在没有你试图尝试它的情况下为你提供答案,因为你不会那样学习.

但是我今天感觉很好,所以我提供了一种方法,可以在第一次加载时进行弹出,而不是再次加载弹出,直到会话被破坏.

通过执行以下操作加载页面时,需要设置会话:

sessionStorage.setItem('firstVisit', '1');

然后你只需要检查这样的会话:

如果没有调用会话,firstVisit则显示消息框

    if (!sessionStorage.getItem('firstVisit') === "1")
    {
       $(".message").show(); 
    } 

例

HTML

<div class="message">
    <div class="message_pad">
        <div id="message"></div>
        <div class="message_leave">

        </div>
    </div>
</div>

的JavaScript/JQuery的

// Save data to sessionStorage
sessionStorage.setItem('firstVisit', '1');

/* Fix size on document ready.*/
$(function()
{
    if (!sessionStorage.getItem('firstVisit') === "1")
    {
       $(".message").show(); 
    } 

    //Close element.
    $(".message").click(function()
    {
       $(this).hide();
    });

    $(".message").css({
        'height': $(document).height()+'px'
    });
    $(".message_pad").css({
        'left': ($(document).width()/2 - 500/2)+'px'
    });
});
/*
* Fix size on resize.
*/
$(window).resize(function(){
    $(".message").css({
        'height': $(document).height()+'px'
    });
    $(".message_pad").css({
        'left': ($(document).width()/2 - 500/2)+'px'
    });
});

的jsfiddle