Question

我知道这个问题好几次，我做了一个小小的研究，并添加了我的代码，仍然在某处我做错了，现在对我来说。以下是我需要实现的目标。 1.在主页加载时打开弹出窗口。 2.弹出窗口应该位于所有浏览器的中心位置。弹出应该淡入。 4.一个用户只能打开一次。

这是我的测试网站http://popuptest.mybigcommerce.com/

到目前为止Popup打开，对于我在中心的弹出窗口，看起来在工作中淡出。但会议没有奏效。

以下是我正在使用的代码

在index.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>

现在在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() { 

    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。使用此库，您可以轻松设置和获取cookie。

如果您使用js-cookie，您的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>

在bigcommerce中打开Popup一次

1 个答案: