2

我一直在让 jquery 插件工作时遇到问题。应该会出现一个 jquery 窗口并询问用户是否同意或不同意条款。如果用户同意按“是”，它将存储一个 cookie，并且在 cookie 过期之前窗口不会返回。如果他们按否，它将重定向到另一个网址。

脚本如下。

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/build-a-popup-modal-window-using-the-jquery-reveal-plugin/

当用户单击是/绿色按钮时，如何集成 jquery.cookies.js 来编写 cookie？我用谷歌搜索了回调和事情无济于事。

如何使显示插件以这种方式工作？

请帮忙！

（PS 另一个用户提出的问题类似于但不一样，因为它通过单击关闭而不是单击是否按钮来执行相同的操作。 我对这个 jQuery cookie 做错了什么？）

以下是我到目前为止所拥有的

<!--jQuery-->
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  -->
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.reveal.js"></script>
    <script src="js/jquery.cookie.js"></script>


<script type="text/javascript">
$(document).ready(function() {

if (!(jQuery.cookie("agree"))) {  

    $('#modal').reveal({ // The item which will be opened with reveal
                    animation: 'fade',                   // fade, fadeAndPop, none
                    animationspeed: 500,                       // how fast animtions are
                    closeonbackgroundclick: false,              // if you click background will modal close?
                    dismissmodalclass: 'close'    // the class of a button or element that will close an open modal
                });
}
});

$(".close").live("click",function () {
    $.cookie("agree", 1, { expires: 1, path: '/' });
});     
</script>



</head>
<body>


<div id="modal">
<img src="images/images.jpg" alt="image test" width="360" height="194" hspace="0" vspace="0" border="0" align="top">
    <div id="heading">heading/div>

    <div id="content">
        <p>Do you agree yes or no?</p>

        <a href="#" class="button green close"><img src="images/tick.png">Yes</a>

        <a href="http://google.com" class="button red close"><img src="images/cross.png">No</a>
    </div>
</div>
4

1 回答 1

2

HTML

<div id="modal">

    <img src="images/images.jpg" alt="image test" width="360" height="194" hspace="0" vspace="0" border="0" align="top" />

    <div id="heading">heading/div>

    <div id="content">

    <p>Do you agree yes or no?</p>

      <a id='agree' href="#" class="button green close"><img src="images/tick.png" /> Yes </a>            <a href="http://google.com" class="button red close"><img src="images/cross.png" /> No </a>    

    </div>

</div>

查询

$('document').load(function() {


    //Check cookie value
    if ($.cookie("disclaimer") != 'agree') {

        $('#modal').reveal({ 
            animation: 'fade',                   
            animationspeed: 500,                       
            closeonbackgroundclick: false,
            dismissmodalclass: 'close'    
        });

    }


    // Attach click function to button '#agree' to set cookie
    $("body").on("click", "#agree", function () {
        $.cookie("disclaimer", "agree", { expires: 365, path: '/' });
    });



});
于 2012-11-14T02:15:30.893 回答