大口取引で一度だけポップアップを開く

Question

この質問は何度か尋ねられましたが、私は小さな研究を行い、私のコードを追加しました。私が達成する必要があるポイント以下。 1.ホームページの読み込み時にポップアップを開きます。 2.ポップアップは、すべてのブラウザで中央に配置する必要があります。 3.ポップアップはフェードインする必要があります。 4. 1人のユーザーに対して1回だけ開く必要があります。

これはhttp://popuptest.mybigcommerce.com/

私のテストのウェブサイトである私にとってこれまでポップアップ開口部、中央にポップアップし、作業にフェードインを探します。セッションは機能しません。以下は

は私が使用したコードの下に、index.htmlをで

htmlhead.htmlで今

<div id="boxes"> 
    <div style="top: 199.5px; left: 551.5px; display: none;" id="dialog" class="window"> 
     <img src="images/coupon2011.jpg" width="507" height="300" /> 
    <a href="#" class="close"><img src="images/closelabel.gif" width="66" height="22" /></a> 
</div> 
<!-- Mask to cover the whole screen --> 
<div style="width: 1478px; height: 602px; display: none; opacity: 0.8;" id="mask"></div> 
</div> 

を働いていたコードです。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 
<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(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()/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> 

<script type="text/javascript"> 

var once_per_session=1 

function get_cookie(Name) { 
var search = Name + "=" 
var returnvalue = ""; 
if (document.cookie.length > 0) { 
offset = document.cookie.indexOf(search) 
if (offset != -1) { // if cookie exists 
offset += search.length 
end = document.cookie.indexOf(";", offset); 
if (end == -1) 
end = document.cookie.length; 
returnvalue=unescape(document.cookie.substring(offset, end)) 
} 
} 
return returnvalue; 
} 

function loadpopunder(){ 
if (get_cookie('popunder')==''){ 
loadpopunder() 
document.cookie="popunder=yes" 
} 
} 
function loadpopunder(){ 
if (once_per_session==0) 
loadpopunder() 
else 
{ 
if (get_cookie('popunder')==''){ 
loadpopunder() 
document.cookie="popunder=yes" 
} 
} 
} 
</script> 

どのような提案やチュートリアルを完了するのが素晴らしいでしょう。

Answer 1

JavaScriptライブラリjs-cookieを使用できます。このライブラリを使用すると、簡単にクッキーを設定して取得できます。

あなたはJS-クッキーを使用する場合は、あなたのhtmlhead.htmlコードは次のようになります。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    // Check if cookie exists 
    if (Cookies.get('popunder')) { 
     return; 
    } 

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

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

    // Set cookie to be sure the popover activated again 
    Cookies.set('popunder', '1'); 

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