4

次のコードは、ページの読み込み時にポップアップ メッセージを表示し、Cookie を作成して、ユーザーがページに戻ったときにポップアップ メッセージが一度も表示されないようにします。Cookie の寿命は時間に基づいています。このコードを変更して、Cookie の有効期間がユーザー セッションまたは 1 日に基づくようにしたいと考えています。ガイダンスやコードスニペットは素晴らしいでしょう。ありがとう。

コードデモへのリンク: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial 

<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD> 
<META content="text/html; charset=windows-1252" http-equiv=Content-Type>
<SCRIPT type=text/javascript src="jquery-latest.pack.js"></SCRIPT>

<SCRIPT>

$(document).ready(function() {  

    //if the cookie hasLaunch is not set, then show the modal window
    if (!readCookie('hasLaunch')) {
        //launch it
        launchWindow('#dialog');        
        //then set the cookie, so next time the modal won't be displaying again.
        createCookie('hasLaunch', 1, 365);
    }

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

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


    $(window).resize(function () {

        var box = $('#boxes .window');

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

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

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

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

    }); 

});

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function launchWindow(id) {

        //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(1000);    
        $('#mask').fadeTo("slow",0.8);  

        //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());
        $(id).css('left', winW/2-$(id).width()/2);

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


}

</SCRIPT>

<STYLE>

body {
    FONT-FAMILY: verdana; FONT-SIZE: 15px
}
A {
    COLOR: #333; TEXT-DECORATION: none
}
A:hover {
    COLOR: #ccc; TEXT-DECORATION: none
}
#mask {
    Z-INDEX: 9000; POSITION: absolute; BACKGROUND-COLOR: #000; DISPLAY: none; TOP: 0px; LEFT: 0px
}
#boxes .window {
    Z-INDEX: 9999; POSITION: fixed; PADDING-BOTTOM: 20px; PADDING-LEFT: 20px; WIDTH: 640px; PADDING-RIGHT: 20px; DISPLAY: none; HEIGHT: 385px; PADDING-TOP: 20px
}
#boxes #dialog {
    PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #ffffff; PADDING-LEFT: 10px; WIDTH: 640px; PADDING-RIGHT: 10px; HEIGHT: 385px; PADDING-TOP: 10px
}


.redbox {
    color: #F00; font-weight: bold;
}
.bold {
    font-weight: bold;
}
</STYLE>




<div id=boxes>
  <div id=dialog class=window><span class="redbox"> pop up message <A   
href="#" class="bold"> Ok </a> </div>

<div id=mask>
</div></div>

</html>
4

2 に答える 2

4

セッション Cookie は有効期限のない Cookie であるため、次のように変更します。

createCookie('hasLaunch', 1, 365);

に：

createCookie('hasLaunch', 1);
于 2012-09-07T09:24:54.010 に答える
2

一部のユーザーはCookieを無効にする可能性があるため、HTML5セッションストレージ機能を使用することをお勧めします。

あなたはこのように試すことができます。

var isFirst = sessionStorage.getItem("FIRSTVISIT");

if(isFirst == null || isFirst == 'undefined') {
   sessionStorage.setItem("FIRSTVISIT", "YES");
   launchWindow('#dialog');
}
于 2012-09-07T09:28:41.997 に答える