页面加载期间弹出表单

Question

我想知道他们如何在页面加载期间弹出问候语，就像在这个有线系统页面上一样 有线系统网站

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

谢谢！

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');
        }
});