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

Popup windows on page load with specific period

本文关键字：时间段 定时间 窗口 加载      更新时间：2023-09-26

在我的页面上，我需要设置一个带有特别优惠的弹出窗口，但我不想每次客户进入主页时都骚扰他们，所以我想使用 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 在页面加载上加载它。您可以通过单击标题下方的橙色标签单击我以获取模态来查看页面页面上的示例。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>

将此代码添加到您的主页上。修改它以显示弹出窗口，而不是显示模式中的警报。此示例将 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>
相关文章：