Блог

Главная - Вопросы по программированию - Помощь в настройке cookie для модального диалога jQuery UI

Помощь в настройке cookie для модального диалога jQuery UI

#jquery #jquery-ui #cookies #modal-dialog

#jquery #jquery-пользовательский интерфейс #файлы cookie #modal-dialog

Вопрос:

Мы размещаем сайт интернет-банкинга, и после входа в систему я создал модальное диалоговое окно для отображения.

Теперь мы хотим использовать подход, основанный на cookie, чтобы его можно было увидеть только один раз. Я совершенно не понимаю, как это сделать. У меня есть включенный код, и если кто-нибудь может помочь, я был бы очень признателен. Мне нужно было бы точно, как это закодировать. Я не очень разбираюсь в html / javascript — честно говоря, мне удалось реализовать это довольно удачно. Но теперь я не могу заставить работать часть cookie! Спасибо всем, кто может мне помочь.

     <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:

Возьмите плагин jQuery cookie и измените свой код следующим образом:

 $(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
        });
    }    
});

Комментарии:

1. Да, там отсутствовал символ и неверный логический оператор. Я добавил его. Скопируйте весь код еще раз

2. Хм, боюсь, результат тот же! Нет всплывающего окна. Я также обязательно очищаю файлы cookie браузера. Пробовал в IE9 и FF4. Тем не менее, спасибо!!

3. Хорошо, у меня наконец-то появилось несколько минут, чтобы фактически запустить код. Моя последняя правка работает. Убедитесь, что вы ссылаетесь на файл cookie jQuery.

4. Еще раз привет! Вау, спасибо, что продолжаете пытаться мне помочь. Может быть, это то, как я вызываю текст для отображения во всплывающем окне (часть, которая начинается с <div class=»optinpopup»>? Я все еще не вижу модальный диалог даже после последнего редактирования. Однако текст, который я хотел отобразить в модальном диалоговом окне, находится не в модальном диалоговом окне, а просто на самой странице.

5. Кроме того, текст отображается на странице, потому что вы не скрыли div модального диалога по умолчанию. Добавьте немного css, чтобы установить для div-модального диалога значение «отображать: нет»;

Ответ №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');

});