0

Please, need some help to stop the popup from showing in mobile devices.

<script type="text/javascript">
    jQuery(function($) {
        var check_cookie = $.cookie('newsletter_popup');
        if(window.location!=window.parent.location){
            jQuery('#newsletter_popup').remove();
        }else{
            if(check_cookie == null || check_cookie == 'shown') {
                setTimeout(function(){
                    beginNewsletterForm();
                }, <?php echo $delay; ?>);
            }
            $('#newsletter_popup_dont_show_again').on('change', function(){
                if($(this).length){        
                    var check_cookie = $.cookie('newsletter_popup');
                    if(check_cookie == null || check_cookie == 'shown') {
                        $.cookie('newsletter_popup','dontshowitagain');            
                    }
                    else
                    {
                        $.cookie('newsletter_popup','shown');
                        beginNewsletterForm();
                    }
                } else {
                    $.cookie('newsletter_popup','shown');
                }
            });
        }
    });

function beginNewsletterForm() {
    jQuery.fancybox({
        'padding': '0px',
        'autoScale': true,
        'transitionIn': 'fade',
        'transitionOut': 'fade',
        'type': 'inline',
        'href': '#newsletter_popup',
        'onComplete': function() {
            $.cookie('newsletter_popup', 'shown');
        },
        'tpl': { 
            closeBtn: '<a title="Close" class="fancybox-item fancybox-close fancybox-newsletter-close" href="javascript:;"></a>' 
        }
    });
    jQuery('#newsletter_popup').trigger('click');
}

</script>
<style type="text/css">
<?php
    if($popup["newsletter_custom_style"]){
        echo $popup["newsletter_custom_style"];
    }
?>
#newsletter_popup{
<?php
    if($popup["newsletter_width"]){
        echo "width:".$popup["newsletter_width"].";";
    }
    if($popup["newsletter_height"]){
        echo "height:".$popup["newsletter_height"].";";
    }
    if($popup["newsletter_bg_color"]){
        echo "background-color:".$popup["newsletter_bg_color"].";";
    }
    if(isset($popup["newsletter_bg_image"]) && $popup["newsletter_bg_image"]){
?>
    background-image:url(<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA)."porto/newsletter_popup/".$popup['newsletter_bg_image'];?>);
<?php
    }
?>
}
</style>
<div class="block block-subscribe" id="newsletter_popup">
    <form action="<?php echo $this->getFormActionUrl() ?>" method="post" id="newsletter-popup-validate-detail" onsubmit="setNewsletterCookie()">
        <div class="block-content">
            <?php
                if($popup["show_logo"]){
            ?>
                    <img src="<?php echo $this->getSkinUrl($popup["show_logo"]); ?>" alt="" />
            <?php
                }
            ?>
            <?php echo $popup['newsletter_content']; ?>
            <div class="input-box">
                <input type="text" name="email" id="newsletter_popup_email" title="<?php echo $this->__('Sign up for our newsletter') ?>" class="input-text required-entry validate-email" placeholder="<?php echo $this->__("Email Address"); ?>" />
                <button type="submit" title="<?php echo $this->__('Go!') ?>" class="button"><span><span><?php echo $this->__('Go!') ?></span></span></button>
                <div class="clearer"></div>
            </div>
        </div>
    </form>
    <script type="text/javascript">
    //<![CDATA[
        var newsletterpopupSubscriberFormDetail = new VarienForm('newsletter-popup-validate-detail');
        document.getElementById("newsletter-popup-validate-detail").onsubmit=function(){
            jQuery.cookie('newsletter_popup','dontshowitagain');
        }
    //]]>
    </script>
    <div class="subscribe-bottom">
        <input type="checkbox" id="newsletter_popup_dont_show_again"/>
        <label for="newsletter_popup_dont_show_again"><?php echo $this->__("Don't show this popup again"); ?></label>
    </div>
</div>
0

you can hide your popup by adding a style by giving display none using media query.

@media screen and (max-width: 800px) {
.block-subscribe {display: none !important;}
}

or You have the popup id

@media screen and (max-width: 800px) {
#newsletter_popup {display: none !important;}
}
0

A hidden class on your popup.

@media (min-width: 768px){
.hidden {display:none !important}
}
  • Thank you, but it doesn't work – MagEGY Sep 1 '15 at 8:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.