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

Question

我找到了一些制作 javascript/jquery 弹出窗口 windows 的方法。但是，有一些问题，首先，我对这两种语言不是很好，只是初学者。

如果有任何现成的代码，用于在网站加载时打开 POPUP window，但每个浏览器会话仅打开一次。如果有人能帮助我，那就太好了。

我需要简单的弹出窗口，里面只有一些文本，但是弹出框的设计看起来不错，不像原始浏览器弹出窗口（如图所示），当然还有关闭按钮。

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

非常感谢

Answer 1

看看 jQuery 模态框 - 按照他们的示例，您将在页面中创建一个隐藏的 HTML 元素（样式随心所欲）。

然后，在您的 $(document).ready() 事件中，.show() 模态。 ready 事件仅在网页加载完成后触发一次。

在许多其他库中还有许多其他方法可以显示自定义模式弹出窗口；做一些研究，因为这通常是一件微不足道的事情。

Answer 2

我知道我真的不应该这样做并在您没有先尝试尝试的情况下为您提供答案，因为您不会那样学习。

但是我今天感觉很好，所以我为您提供了一种在第一次加载时弹出弹出窗口并且在会话被销毁之前不会再次加载弹出窗口的方法。

您需要在加载页面时设置会话，方法如下：

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

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

Popup on website load once per session

html

javascript

session

jquery

popup