弹出窗口仅显示一次 [英] popup displays only once

问题描述

我有一个弹出窗口，显示页面加载情况.我希望它只显示一次.
这是我的代码:(javascript):

i have a popup which shows on page load. i want it to be displayed only once.
here is my code: (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标记在这里:

and html markup here:

 <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代码中设置一个计数器.
这是我尝试过的:

i have tried using jquery.cookies and set a counter in my javascript code.
this what i have tried:

 <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>

我怎么只能显示一次? 我知道在此处和

how could i display it only once? i know this question has been asked here and here
i have searched a lot but with no success.
thanks in advance

推荐答案

像这样创建cookie(在第四行中，您可以将天数从4更改为另一个数字):

create the cookie like this (on the forth line you can change the number of days from 4 to another number):

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操作.

no need to use jquery for this simple cookie manipulation.

这篇关于弹出窗口仅显示一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！