【问题标题】:Open a popup window on Magento home page once when user open a site用户打开网站时在 Magento 主页上打开一个弹出窗口
【发布时间】:2016-03-28 08:23:34
【问题描述】:

我想在用户每次访问网站时在主页中打开一个弹出窗口。 现在的问题是每次重新加载主页时都会出现弹出窗口。我只想显示此弹出窗口一次。

 <?php $currentUrl = Mage::helper('core/url')->getCurrentUrl();
 if($currentUrl=='http://website.com/')
 {
 ?>
<form action="<?php echo $this->getUrl('subscribe/index/subscriptionsave/'); ?>" id="subscribeForm" method="post">
<div id="boxes">
  <div id="dialog" class="window">
    <div id="popupfoot">  <a class="agree" href="#">close</a> </div>
    <div class="popupcontentbox">
        <div class="box_content">
            <h2>Stay in the loop!!</h2>
            <p>Be the first one to know about new arrivals,
fresh offers &  fashion updates.</p>
         <div class="book-column-left">
        <?php /*?> <label class="f">Email Address<span>*</span></label><?php */?>
         <input type="text" class="input-text required-entry validate-email" placeholder="Email Address *"  name="emailid" id="emailid">
          </div>
           <input type="submit" name="sub" value="Submit" class="btn">
           <div class="offer_text">Get flat 20% Off on your First purchase. Use coupon "INDULGE20".</div>
        </div>
    </div>
  
  </div>
  <div id="mask"></div>
</div>
</form>
 <?php } ?>
<script type="text/javascript">
//<![CDATA[
    var subscribeForm = new VarienForm('subscribeForm', true);
//]]>
    </script>



<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script> 
    <?php */?><script>
    jQuery(document).ready(function() { 
    var id = '#dialog'; 
    //Get the screen height and width
    var maskHeight = jQuery(window).height();
    var maskWidth = jQuery(window).width();
        
    //Set heigth and width to mask to fill up the whole screen
    jQuery('#mask').css({'width':maskWidth,'height':maskHeight});
     
    //transition effect
    jQuery('#mask').fadeIn(500);    
    jQuery('#mask').fadeTo("slow",0.9); 
        
    //Get the window height and width
    var winH = jQuery(window).height();
    var winW = jQuery(window).width();
                  
    //Set the popup window to center
    jQuery(id).css('top',  winH/2-jQuery(id).height()/2);
    jQuery(id).css('left', winW/2-jQuery(id).width()/2);
        
    //transition effect
    jQuery(id).fadeIn(2000);    
        
    //if close button is clicked
    jQuery('.window .agree').click(function (e) {
    //Cancel the link behavior
    e.preventDefault();
    
    jQuery('#mask').hide();
    jQuery('.window').hide();
    });
    
    //if mask is clicked
    jQuery('#mask').click(function () {
    jQuery(this).hide();
    jQuery('.window').hide();
    });
        
         
    jQuery(window).scroll(function() {    
            
    var scroll = jQuery(window).scrollTop();
            if(scroll > 300){
                jQuery(".gotop").addClass("active");
            }else if(scroll < 300){
                jQuery(".gotop").removeClass("active");
            }
    
            
        });
        
        jQuery('.gotop').click(function(){
        jQuery("html, body").animate({ scrollTop: 0 }, 700);
            return false;
         });
    });
    </script>

【问题讨论】:

    标签: javascript jquery css magento magento-1.9


    【解决方案1】:

    保存cookies 值,例如OPENED = 1,然后在下一页打开php 一边检查此类cookie 是否已经存在,然后不要添加您的popup 代码或在javascript 一边检查并执行不显示popup

    JS 实现示例

    1)setget cookie 函数添加到您的 js - 请参阅此处有关 setCookiegetCookie 的手册 - http://www.w3schools.com/js/js_cookies.asp

    <script type="text/javascript">
    
    function setCookie(cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays*24*60*60*1000));
        var expires = "expires="+d.toUTCString();
        document.cookie = cname + "=" + cvalue + "; " + expires;
    } 
    function getCookie(cname) {
        var name = cname + "=";
        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);
            if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
        }
        return "";
    } 
    
    </script>
    

    2) 只需用if contion 代码括起来即可显示您的弹出窗口,正如我从您凌乱的代码中了解到的那样,它是jQuery(id).fadeIn(2000);

    if( getCookie('popup_opened') == "" ){
         jQuery(id).fadeIn(2000);
    
         // creates popup_opened cookie and will keep it till browser close
         setCookie('popup_opened', '1', 0)
    }
    

    注意:通过此解决方案,您的访问者至少应该在每个使用过的浏览器上看到该弹出窗口,因为 cookie 分别存储在每个浏览器中

    【讨论】:

    • 你能不能把我上面的代码申请清楚,谢谢
    • 现在它显示了一次弹出窗口,但是当我关闭站点并再次打开该站点时,那个时候弹出窗口没有出现............只有当我清除时才会出现浏览器历史记录,但我希望每次打开网站时都会出现弹出窗口
    • 简单地设置exdays = 0而不是360见上面的例子我更新了它,(阅读文章了解更多)
    • 嗨,问题仍然没有解决............现在每当我重新加载主页时,弹出窗口就会出现
    • 你在测试什么浏览器呢?火狐还是 Chrome ?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-12-12
    • 2011-02-16
    • 1970-01-01
    相关资源
    最近更新 更多