每个会话一次的网站加载弹出窗口[重复]答案

【问题标题】：Popup on website load once per session [duplicate]每个会话一次的网站加载弹出窗口[重复]
【发布时间】：2017-01-03 20:59:49
【问题描述】：

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

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

我需要简单的弹出窗口，里面只有一些文本，但要为弹出框设计一些好看的东西，不像原来的浏览器弹出窗口（如图片），当然还有关闭按钮。

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

非常感谢

【问题讨论】：

你能给我们提供 JSfiddle，到目前为止你的 html 和 javascript 吗？
这个问题已经被问过了，有很好的答案@stackoverflow.com/questions/24189428/…
您需要帮助或完整的代码吗？向我们展示您的努力以及到目前为止必须尝试的内容。
网上有大量带有示例的现成插件。 jQuery UI 对话框是一个非常常见的例子。你有没有尝试过任何东西？我们很乐意为您在编写代码时遇到的任何问题提供帮助。但是，如果问题是您已经放弃并希望其他人为您编写它，我们将无能为力。

标签： javascript jquery html session popup

【解决方案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

【讨论】：

非常感谢，它帮助了我。我做了一些更改，因为它一开始不起作用，但后来它起作用了。 // 将数据保存到 sessionStorage if(!sessionStorage.getItem('firstVisit')){ sessionStorage.setItem('firstVisit', '1'); }else{ sessionStorage.setItem('firstVisit', '0'); } /* 修复文档准备好的大小。*/ $(function(){ if (sessionStorage.getItem('firstVisit') === "1"){ $(".message").css('display', ' inline') } // Aizver POPUP $("#message").click(function(){ $(".message").hide(); }); });

【解决方案2】：

看看 jQuery modals - 按照他们的例子，你将在你的页面中创建一个隐藏的 HTML 元素（你想要的样式）。

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

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

【讨论】：

这很有用，但作为评论可能更好