老外网站常用newsletter弹窗JS代码分享

今天在一老外网站看到了一段非常漂亮的 newsletter弹窗效果, 这里把代码分享给大家。

<script>
        function getCookie(c_name) {
            var search = c_name + "="
            var returnvalue = "";
            if (document.cookie.length > 0) {
                offset = document.cookie.indexOf(search)
                if (offset != -1) {
                    offset += search.length
                    end = document.cookie.indexOf(";", offset);
                    if (end == -1) end = document.cookie.length;
                    returnvalue=unescape(document.cookie.substring(offset, end))
                }
            }
            return returnvalue;
        }


        jQuery(document).ready(function ($) {
            var showIt = getCookie('shownewsletter');
            var m = 1;
            var date = new Date();
            date.setTime(date.getTime() + (m * 60 * 1000));
            if (showIt == '') {
                $('#tm-newsletter-popup').fadeIn(300);
            }
            $('#newsletter-popup-dont-show').click(function (e) {
                e.preventDefault()
                document.cookie = 'shownewsletter=true; path=/; expires=' + date.toString();
                $('#tm-newsletter-popup').fadeOut(300);
            })
            $('#newsletter-popup-close-btn').click(function (e) {
                e.preventDefault();
                document.cookie = 'shownewsletter=false';
                $('#tm-newsletter-popup').fadeOut(300);
            })
            $('#tm-newsletter-popup').submit(function (e) {
                e.preventDefault();
                var email = $("#input-tm-newsletter-popup-email").val();
                var emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/igm;
                if (emailRegex.test(email)) {
                    var dataString = 'tm_newsletter_popup_email=' + email;
                    $.ajax({
                        type: "POST",
                        url: "index.php?route=module/tm_newsletter_popup",
                        data: dataString,
                        cache: false,
                        success: function (result) {
                            if (!result) {
                                $('#tm-newsletter-popup_success').html('You have successfully subscribed').fadeIn(300).delay(4000).fadeOut(300);
                            } else {
                                $('#tm-newsletter-popup_error').dequeue();
                                $('#tm-newsletter-popup_error').html(result).fadeIn(300).delay(4000).fadeOut(300);
                            }
                        }
                    });
                } else {
                    $('#tm-newsletter-popup_error').html('Please enter a valid e-mail!').fadeIn(300).delay(4000).fadeOut(300);
                }
            });


        });
    </script>

应客户要求,我们要在chinaobd2.com网站加上一个弹窗newsletter,方便初次访问网站的客户留下联系方式用。

猜你喜欢

转载自www.cnblogs.com/aid12580/p/10539410.html
今日推荐