Javascript 每个会话加载一次网站上的弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32865390/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Popup on website load once per session
提问by brass
I found some ways to make javascript/jquery popup windows. But, there were some problems, first of all, I am not very good with these two languages, just beginner.
我找到了一些制作 javascript/jquery 弹出窗口的方法。但是，有一些问题，首先，我对这两种语言不是很好，只是初学者。
If there is any ready code, for opening POPUP window on website load, but only once per browser session. It would be very nice, if someone could help me with this.
如果有任何准备好的代码，用于在网站加载时打开 POPUP 窗口，但每个浏览器会话只能打开一次。如果有人能帮我解决这个问题，那就太好了。
I need simple popup, with just some text in it, but design for popup box something good looking, not like original browser popup (like in image), of course, with closing button.
我需要简单的弹出窗口，其中只有一些文本，但为弹出框设计的东西好看，不像原始浏览器弹出窗口（如图像），当然还有关闭按钮。
http://i.stack.imgur.com/xNWxf.png
http://i.stack.imgur.com/xNWxf.png
Thanks a lot
非常感谢
回答by YaBCK
I know I shouldn't really do this and provide you with the answer without you trying to attempt it first because you won't be learning that way.
我知道我不应该真正这样做并在没有您尝试先尝试的情况下为您提供答案，因为您不会以这种方式学习。
But I'm feeling nice today, so I'm providing you of a way of doing a pop up on first load and not loading the pop again until the session been destroyed.
但是我今天感觉很好，所以我为您提供了一种在第一次加载时弹出并在会话被销毁之前不再加载弹出的方法。
You need to set the session, when you load the page by doing the following:
当您通过执行以下操作加载页面时，您需要设置会话：
sessionStorage.setItem('firstVisit', '1');
Then you just need to check for the session like this:
然后你只需要像这样检查会话：
If there is no session called firstVisitthen show message box
如果没有调用会话，firstVisit则显示消息框
if (!sessionStorage.getItem('firstVisit') === "1")
{
$(".message").show();
}
EXAMPLE
例子
HTML
HTML
<div class="message">
<div class="message_pad">
<div id="message"></div>
<div class="message_leave">
</div>
</div>
</div>
JavaScript/JQuery
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'
});
});
回答by DragonZero
Take a look at jQuery modals - by following their example, you will create a hidden HTML element in your page (styled however you wish).
看一看 jQuery modals - 按照他们的例子，你将在你的页面中创建一个隐藏的 HTML 元素（你想要的样式）。
Then, within your $(document).ready()event, .show()the modal. The readyevent only fires once after the webpage has finished loading.
然后，在您的$(document).ready()事件中，.show()模态。该ready事件仅在网页加载完成后触发一次。
There are many other ways to show custom modal popups within many other libraries; do some research since this is generally a trivial matter.
在许多其他库中还有许多其他方法可以显示自定义模式弹出窗口；做一些研究，因为这通常是一件小事。
