页面加载期间弹出窗体

Question

我想知道他们如何在页面加载期间制作弹出式问候语，例如在此wiredsystems页面上wired systems website

就像一个带有问候语的小表格。

谢谢！

Answer 1

以下是该网站页面来源的脚本。简而言之，您使用$（document）.ready。

调用弹出函数

require([
        'jquery',
        'jquery/jquery.cookie'
    ], function ($) {
        $(document).ready(function(){
                    if($("body").hasClass("cms-index-index")) {
                        var check_cookie = $.cookie('newsletter_popup');
                if(window.location!=window.parent.location){
                    $('#newsletter_popup').remove();
                } else {
                    if(check_cookie == null || check_cookie == 'shown') {
                        setTimeout(function(){
                            beginNewsletterForm();
                        }, 1500);
                    }
                    $('#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() {
            $.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>' 
                },
                'helpers': {
                    overlay: {
                        locked: false
                    }
                }
            });
            $('#newsletter_popup').trigger('click');
        }
});