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

我嘗試使用這個腳本自己將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

如果你想在IE上顯示它只使用IE條件標簽

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

IE條件評論

還要養成在調試時測試變量的習慣

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

Answer 2

你在script.js的第12行有一個錯誤。 您正在使用名為validationEngine的方法。 你確定加載了這個，因為我沒有在任何地方看到它。 您也可以嘗試在控制台中鍵入$.validationEngine ，它會告訴您它未定義。 這可能會阻止你的javascript執行。

要么確保包含此驗證引擎，要么不使用它，如果錯誤仍然存​​在，請返回。 從我所看到的，你對cookie插件的說法是正確的。 它也已初始化，我可以通過控制台在您的網站上使用它。

編輯

調用模態化器初始化后，您返回false。 我想這是因為你從屬於html錨點（ <a /> ）上的點擊事件的代碼中復制了它，並且它需要停止執行默認操作（轉到鏈接）。 在這種情況下，我認為它沒有做任何事情，但在$ .ready上返回false似乎本能地就像一個非常糟糕的主意。 擺脫它！