jQuery 粘性对话框模式

Question

根据新的 Cookie 规定，像我们所有人一样，我需要向用户显示一条消息，告知他们我在网站上持有的 Cookie。我做了一些研究，我见过的最好的例子是http://www.packtpub.com。

我的网站上有 jQuery，但我不知道它的作用有多大。我想知道是否有人可以阐明我如何实施类似的解决方案。我已经厌倦了在 packtpub.com 上弄清楚它是如何完成的，但这有点超出了我的理解范围。我搜索了模态和粘性模态，但没有找到一个很好的例子来说明如何生成类似的解决方案，因为大多数对话框模态似乎都是通过将背景变灰来工作的，直到在模态上执行某些操作为止。

我将不胜感激任何人在如何重新创建类似的解决方案方面提供的有用提示。

谢谢。

Answer 1

用您的内容创建一个元素，

<div id="cookie-notification">
    <!-- Your content goes here !-->
    <a href="#" id="close-notifiction">Close for now</a>
    <a href="#" id="close-notifiction-forever">Never show again</a>
</div>

使用 css 将其固定在底部，并使用大 z-index 将其置于其他顶部。

#cookie-notification{
    position : fixed;
    bottom : 10px;
    right : 10px;
    z-index : 99999;
    //more of your styles ..
    }

现在您可以在页面右下角看到通知。

现在用 jQuery 隐藏它。

$('#close-notification').click(function(){
    $('#cookie-notification').fadeOut(300);
    return false;
    }

要“不再显示此信息”，请将您的 cookie 设置为不再显示此信息，检查页面加载时是否设置了此 cookie，如果是这样，则隐藏通知。

$('#close-notification').click(function(){
    $('#cookie-notification').fadeOut(300);
    createCookie('show-notification','never',9999); 
    //refer the link below and use the code from there to make create cookie work
    return false;
    }

//检查页面加载时是否设置了cookie

$(document).ready(function(){
    if(readCookie('show-notification') == 'never'){
            $('#cookie-notification').hide();
            }
    }

这是本页底部的 cookie 代码http://www.quirksmode.org/js/cookies.html