@disay_ru

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

Здравствуйте. Создал скрипт модального окна, которое автоматически появляется на странице сайта спустя 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.
  • Вопрос задан
  • 57 просмотров
Пригласить эксперта
Ответы на вопрос 1
Shev_Art_V
@Shev_Art_V
Занимаюсь разработкой сайтов на Modx Revolution
$(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
        });
    });
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы