页面加载时的弹出窗口具有特定时间段

时间:2013-09-11 14:27:24

标签: javascript jquery cookies popup

在我的页面上我需要设置一个带有特别优惠的弹出窗口,但我不想在每次进入主页时骚扰我的客户,所以我想使用cookie进行chcecking并显示特定时段的弹出窗口。例如,每周一次会很棒。我是javascript的新手,我刚下载并使用Reveal pop up插件但我知道如何设置它。

这是我的代码:

    <head>
    <link rel="stylesheet" href="reveal.css">

    <script src="jquery-1.4.4.min.js" type="text/javascript"></script>

    <script src="jquery.reveal.js" type="text/javascript"></script>
   </head>

这是弹出窗口

<body>
....
    <div id="myModal" class="reveal-modal">
         <h1>Modal Title</h1>
         <p>Any content could go in here.</p>
         <a class="close-reveal-modal">&#215;</a>
    </div>
</body>

现在我可以通过点击看起来像thaht

的链接来运行它
<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>

但我想用cookies加载它的pageload。 您可以通过单击橙色标签在页面上查看样本单击标题下方的“我为模式”。 http://mmiuris.sk

感谢任何想法。

修改 该脚本正在运行finr,但我不能让揭示插件框出现(它甚至没有制作cookie文件) 代码看起来像这样,看到任何错误?

<head>
    <link rel="stylesheet" href="reveal.css">
    <script src="jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="jquery.reveal.js" type="text/javascript"></script>

    <script type="text/javascript">
        function setCookie(c_name, value, exdays) {
            var exdate = new Date();
            exdate.setDate(exdate.getDate() + exdays);
            var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
            document.cookie = c_name + "=" + c_value;
        }

        function getCookie(c_name) {
            var c_value = document.cookie;
            var c_start = c_value.indexOf(" " + c_name + "=");
            if (c_start == -1) {
                c_start = c_value.indexOf(c_name + "=");
            }
            if (c_start == -1) {
                c_value = null;
            }
            else {
                c_start = c_value.indexOf("=", c_start) + 1;
                var c_end = c_value.indexOf(";", c_start);
                if (c_end == -1) {
                    c_end = c_value.length;
                }
                c_value = unescape(c_value.substring(c_start, c_end));
            }
            return c_value;
        }

        function showModal() {
            // Check if cookie existes
            var expireDate = getCookie("showpopup");
            var today = new Date().toUTCString();
            alert(today);
            if (expireDate != null && expireDate > today) {
                //Do nothing!
            }
            else {
               //ShowPopup here!
                        $(document).ready(function() {
        $('#myModal').reveal();
        });
                //Create cookie
                setCookie("showpopup", "anything", 1);
            }
        }    
   </script>
   </head>

 <body onLoad="showModal()">    
        <div id="myModal" class="reveal-modal">
         <h1>Modal Title</h1>
         <p>Any content could go in here.</p>
         <a class="close-reveal-modal">&#215;</a>
    </div>

...
</body>

1 个答案:

答案 0 :(得分:2)

在您的主页上添加此代码。修改它以显示弹出窗口而不是show modal中的警报。此示例将cookie设置为每天到期。将其更改为7天或您想要的任何值...

<script type="text/javascript">
        function setCookie(c_name, value, exdays) {
            var exdate = new Date();
            exdate.setDate(exdate.getDate() + exdays);
            var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
            document.cookie = c_name + "=" + c_value;
        }

        function getCookie(c_name) {
            var c_value = document.cookie;
            var c_start = c_value.indexOf(" " + c_name + "=");
            if (c_start == -1) {
                c_start = c_value.indexOf(c_name + "=");
            }
            if (c_start == -1) {
                c_value = null;
            }
            else {
                c_start = c_value.indexOf("=", c_start) + 1;
                var c_end = c_value.indexOf(";", c_start);
                if (c_end == -1) {
                    c_end = c_value.length;
                }
                c_value = unescape(c_value.substring(c_start, c_end));
            }
            return c_value;
        }

        function showModal() {
            // Check if cookie existes
            var expireDate = getCookie("showpopup");
            var today = new Date().toUTCString();
            alert(today);
            if (expireDate != null && expireDate > today) {
                //Do nothing!
            }
            else {
                //ShowPopup here!
                alert('This is the popup!');
                //Create cookie
                setCookie("showpopup", "anything", 1);
            }
        }        
    </script>