Help With Setting Cookie for a JQuery UI Modal Dialog

问题

We host an internet banking site and upon logging in, I created a modal dialog box to display.

We now want to take a cookie based approach so it's only seen once. I'm completely lost on how to do this. I have the code included and if someone could help, I'd really appreciate it. I'd need exactly how to code this. I'm not very skilled in html/javascript - I was able to implement this quite luckily honestly. But now I'm unable to get the cookie portion working! Thanks to anyone who is able to help me out.

    <body onLoad="loadPage();" onUnload="unloadPage();">
<script>
    $(function() {
        // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
        $( "#dialog:ui-dialog" ).dialog( "destroy" );

        $( "#dialog-modal" ).dialog({
            height: 475,
            width: 550,
            position: 'top',
            modal: true,
            buttons:{ "Close": function() { $(this).dialog("close"); } },
            draggable: false,
            resizable: false
        });

    });

    </script>

<div class="optinpopup">
<div id="dialog-modal" title="Alert">
    <br><b>IMPORTANT MESSAGE FOR ATM/DEBIT CARD HOLDERS</b>
    <br><br>
        Federal Regulations recently changed, which means we are required to get your permission to consider paying overdrafts on your everyday debit transactions.
        <br><br>
        Please <a href="www.websitehere.com" style="text-decoration: none; " target="_blank"><b>click here</b></a> to find out important information regarding overdraft charges and debit card transactions.
        <br></div></div>

回答1:

Grab the jQuery cookie plugin and change your code like so:

$(function() {
    // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
    $( "#dialog:ui-dialog" ).dialog( "destroy" );

    if ($.cookie('showDialog') == undefined || $.cookie('showDialog') == null || $.cookie('showDialog') != 'false') {
        $( "#dialog-modal" ).dialog({
            height: 475,
            width: 550,
            position: 'top',
            modal: true,
            buttons:{ "Close": function() { $(this).dialog("close"); $.cookie('showDialog', 'false', { expires: 3650 });  } },
            draggable: false,
            resizable: false
        });
    }    
});

回答2:

$( '.home_page_popup' ).dialog({ 
    autoOpen: false,
    closeText: "",
    modal: true,
    resizable: false,
    icon: "ui-icon-heart",
    classes: {
        "ui-dialog": "home_page_popup_dialog"
    },
    width: pop_up_width
});

$(".home_page_popup").on("click",".popup_close",function() {

    if ($.cookie('subscribe_popup_status') == null) {
        $.cookie('subscribe_popup_status', 'shown',{ expires: popup_duration } );
    }

    $( '.home_page_popup' ).dialog('close');

});

来源：https://stackoverflow.com/questions/5913218/help-with-setting-cookie-for-a-jquery-ui-modal-dialog

标签

jquery

jquery-ui

modal-dialog