Question

我有一个弹出窗口显示页面加载。我希望它只显示一次。
这是我的代码：（javascript）：

<script type="text/javascript">
    $(document).ready(function () {

        var id = '#dialog';

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({ 'width': maskWidth, 'height': maskHeight });

        //transition effect
        $('#mask').fadeIn(500);
        $('#mask').fadeTo("slow", 0.9);

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        $(id).css('top', winH / 2 - $(id).height() / 2);
        $(id).css('left', winW / 2 - $(id).width() / 2);

        //transition effect
        $(id).fadeIn(2000);

        //if close button is clicked
        $('.window .close').click(function (e) {
            //Cancel the link behavior
            e.preventDefault();

            $('#mask').hide();
            $('.window').hide();
        });

        //if mask is clicked
        $('#mask').click(function () {
            $(this).hide();
            $('.window').hide();
        });

    });

</script>

和html标记：

 <div id="boxes">
  <div id="dialog" class="window">
    <h4 style="color:#1872AB;">Important Announcement</h4>
    <div id="popupfoot" > <a href="#" class=" agree" style="color:#f00 !important;font-weight:bold;">X</a> </div>
  </div>
  <div id="mask"></div>
</div>

我尝试过使用jquery.cookies并在我的javascript代码中设置一个计数器。这就是我的尝试：

 <script type="text/javascript">
    if ($.cookie('popup') != 'seen') {
        $.cookie('popup', 'seen', { expires: 365, path: '/' }); 
        $j("#dialog").delay(2000).fadeIn();
        $j('#popupfoot').click(function (e) 
        {
            $j('#dialog').fadeOut(); 
        });
        $j('#dialog').click(function (e) {
            $j('#dialog').fadeOut();
        });
    };
</script>

我怎么能只显示一次？我知道这个问题已经被问到here和here 我搜索了很多但没有成功。
提前谢谢

Answer 1

虽然你说你尝试过饼干但它没有用，但我想给出一个应该使用的答案并且有效。通过使用cookie，您可以将页面设置为仅显示一次。由于大多数浏览器都支持cookie，因此这比使用当前浏览器所拥有的内部存储引擎更可靠。

$(document).ready(function(){

    // test for cookie here
    if ($.cookie('test_status') != '1') {
        //show popup here
        window.open('YOUR POPUP URL HERE','windowtest','toolbar=0,status=0,width=500,height=500');

        // set cookie here if not previous set
        var date = new Date();
        var minutes = 30;
        date.setTime(date.getTime() + (minutes * 60 * 1000));
        $.cookie('test_status', '1', {expires: date});
   }

});

Answer 2

像这样创建cookie（在第四行，您可以将天数从4更改为另一个数字）：

if (document.cookie.indexOf('popupShowed=1') == -1) {
    $(document).ready(function () {
        var date = new Date();
        date.setTime(date.getTime() + (4 * 864e+5)); // 4 days
        document.cookie = 'popupShowed=1; expires=' + date.toUTCString();

        // your code here
    });
}

无需使用jquery进行这种简单的cookie操作。

弹出窗口只显示一次

2 个答案: