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

Answer 2

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

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

还有很多其他方法可以在许多其他库中显示自定义模式弹出窗口;做一些研究，因为这通常是一件小事。

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

2 个答案: