使用 Cookie 在页面加载时显示弹出消息

Question

我正在使用本教程在我的网站上创建一个弹出消息：LINK

它应该只显示/弹出，当用户使用 IE7 或更低版本时，并且只有一次 - 所以我需要使用 cookie。

本教程使用了一个名为“Reveal”的 jQuery 插件，激活方式如下：

<script type="text/javascript">
$(document).ready(function() {
    $('#button').click(function(e) {        // Button which will activate our modal
        $('#modal').reveal({                // The item which will be opened with reveal
            animation: 'fade',              // fade, fadeAndPop, none
            animationspeed: 600,            // how fast animtions are
            closeonbackgroundclick: true,   // if you click background will modal close?
            dismissmodalclass: 'close'      // the class of a button or element that will close an open modal
        });
    return false;
    });
});

这个脚本附带的 HTML 是这样写的：

    <div id="modal">
        <div id="heading">
            Are you sure you want to do that?
        </div>
        <div id="content">
            <p>Clicking yes will make Comic Sans your new system<br> default font. Seriously, have you thought this through?</p>
            <a href="#" class="button green close"><img src="images/tick.png">Yes, do it now!</a>
            <a href="#" class="button red close"><img src="images/cross.png">No, I’m insane!</a>
        </div>
    </div>

我尝试使用 THIS 脚本自己将 cookie 添加到 "Reveal"-plugin，但没有成功：

<script type="text/javascript">
    $(document).ready(function() {
        if ( $.cookie ( 'first_visit' ) !== '0' ){
            $('#modal').reveal({                // The item which will be opened with reveal
                animation: 'fade',              // fade, fadeAndPop, none
                animationspeed: 600,            // how fast animtions are
                closeonbackgroundclick: true,   // if you click background will modal close?
                dismissmodalclass: 'close'      // the class of a button or element that will close an open modal
            });
            $.cookie( 'first_visit' , '0' );
        return false;
        }
    });
</script>

我做错了什么？我希望在 IE7 及以下版本上显示此弹出消息 - 仅在第一次访问该站点时显示。

Answer 1

您在 script.js 的第 12 行有一个错误。您正在使用一种名为validationEngine 的方法。你确定你加载了这个，因为我在任何地方都看不到它。您也可以尝试在控制台中输入$.validationEngine，它会告诉您它是未定义的。这可能会停止您的 javascript 执行。

要么确保包含此验证引擎，要么不使用它，如果错误仍然存​​在，请返回。据我所知，您对 cookie 插件的使用是正确的。它也被初始化了，我可以通过控制台在你的站点上使用它。

编辑

调用模态器初始化后返回 false。我猜这是因为您从属于 html 锚点 (<a />) 上的单击事件的代码中复制了它，并且它需要停止执行默认操作（转到链接）。我认为在这种情况下它不会做任何事情，但是在 $.ready 上返回 false 似乎本能地是一个非常糟糕的主意。摆脱它！

Answer 2

如果您希望它在 IE 上显示，请仅使用 IE 条件标签

<!--[if lt IE 8]>
<script type="text/javascript">
... your code ...
</script>
<![endif]-->

IE Conditional Comment

还要养成调试时测试变量的习惯

<script type="text/javascript">
    $(document).ready(function() {
        var cookie = $.cookie('first_visit');
        alert(cookie); // this will show you why it is not workin
        ....