Работа с Cookies в Bootstrap Modal. Как заставить скрыть модальное окно?

Question

[disay_ru]

Здравствуйте. Создал скрипт модального окна, которое автоматически появляется на странице сайта спустя 3 секунды. Добавил туда checkbox, который если отметить, то модальное окно при следующей перезагрузке страницы не должно появится. То есть отмечая checkbox, записываем в браузер cookies для пользователя. Вот мой код: (Прошу не обращать внимания на вставки php кода - это плагин для cms)

<?php
$this->addJS("templates/default/widgets/besttimer/js/jquery.cookie.min.js");
?>

<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<?= $cont; ?>
</div>
<div class="modal-footer">
<div class="banner-modal-hide" <?php if ($hide) echo 'style="display: none;"';?>>
<input class='modal-check' name='modal-check' type="checkbox"> Больше не показывать это
</div>
<button type="button" class="<?= $buttontype; ?>" data-dismiss="modal"><?= $buttontext; ?></button>
</div>
</div>
</div>
</div>

<style>

.modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem;
    border-top: 0 solid #0079f3;
    border-bottom-right-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
    background: #e1e1e1;
}

</style>

<script>
function explode(){
// $(document).ready(function() {
$("#staticBackdrop").modal('show');
// });
}

setTimeout(explode, <?= $sec; ?>);

</script>

<script type = "text/javascript">

$(document).ready(function(){
    var my_cookie = $.cookie($('.modal-check').attr('name'));
    if (my_cookie && my_cookie == "true") {
        $(this).prop('checked', my_cookie);
        console.log('checked checkbox');
    }
    else{
        $('#myModal').modal('show');
        console.log('uncheck checkbox');
    }

    $(".modal-check").change(function() {
        $.cookie($(this).attr("name"), $(this).prop('checked'), {
            path: '/',
            expires: 1
        });
    });
});

</script>

Но, как бы я не мучался, не получается и все. Может в моём коде есть какая-то грубая ошибка? Буду признателен мастерам с черным поясом по javascript.

Answer 1

[Артур Ш]

$(this) - это документ, у него нет атрибута checked
$(this).prop('checked', my_cookie);
Вам нужно при загрузке страницы проверять есть ли кука, если нет, то показать модалку. И повесить обработчик на изменение в чекбоксе, если он выбран, то нужно записать куку.

$(document).ready(function(){
    var my_cookie = $.cookie($('.modal-check').attr('name'));
    if (!my_cookie) {
         $('#myModal').modal('show');
    }

    $(".modal-check").change(function() {
        $.cookie($(this).attr("name"), $(this).prop('checked'), {
            path: '/',
            expires: 1
        });
    });
});

Comments

[Артур Ш]

Забыл, тут проверка нужна

$(".modal-check").change(function() {
if($(this).prop('checked')){
        $.cookie($(this).attr("name"), $(this).prop('checked'), {
            path: '/',
            expires: 1
        });
}
    });

[disay_ru]

Артур Ш, к сожалению, не срабатывает. Вот здесь можно посмотреть работу модуля: Клик

[Артур Ш]

У вас ошибка в консоли, а код работает.

[disay_ru]

Артур Ш, все ошибки исправлены. Но код не работает.

[Артур Ш]

disay_ru, во-первых не все, там теперь $ undefined. во-вторых код работает, я проверил. В-третьих не работает вот это $('#myModal').modal('show'); потому что у нужного модального окна id вот такой staticBackdrop

[disay_ru]

Я тут поюзал систему, вообще есть подозрение что код не срабатывает из-за того, что выполняется раньше jquery.js. Попробую сейчас через

addJS впихнуть скрипт после jquery. И ваш метод тоже сейчас попробую с переменной. Тоже кстати смотрел на myModal и рука так и чесалась поменять))))

[disay_ru]

Эх, в общем чудеса да и только. Скрипт выполнил после Jquery, ошибок в консоли нет, id поменял....Ну вот вообще теперь полнейший тупик. Была надежда, что все таки из-за того что скрипт выполнялся выше Jquery

[Артур Ш]

Пробовали вставлять просто в тэге script в самом конце?

[Артур Ш]

disay_ru, он недолжен был выполняться выше jquery, т.к. использует эту библиотеку.

[disay_ru]

Артур Ш, да, уже так сейчас на данный момент и сделано. Поспрашивал на форумах, говорят что логика самого скрипта неверная. Поэтому наверное буду переписывать сам javascript)