0

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

这是我的代码：

    <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>

但我想用 cookie 在页面加载时加载它。您可以通过单击标题下方的橙色标签 Click Me For A Modal 来查看页面上的示例。 http://mmiuris.sk

感谢您的任何想法。

编辑： 脚本正在运行，但我无法显示插件框（它甚至不制作 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>
4

1 回答 1

2

在您的主页上添加此代码。修改它以显示弹出窗口而不是显示模式中的警报。此示例将 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>
于 2013-09-11T14:53:46.863 回答