За последние 24 часа нас посетили 22644 программиста и 1282 робота. Сейчас ищут 940 программистов ...

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

Тема в разделе "JavaScript и AJAX", создана пользователем disay, 15 фев 2021.

Метки:
  1. disay

    disay Новичок

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

    Код (Javascript):
    1. <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    2. <div class="modal-dialog">
    3. <div class="modal-content">
    4. <div class="modal-header">
    5. </div>
    6. <div class="modal-body">
    7. <?= $cont; ?>
    8. </div>
    9. <div class="modal-footer">
    10. <div class="banner-modal-hide" <?php if ($hide) echo 'style="display: none;"';?>>
    11. <input class='modal-check' name='modal-check' type="checkbox"> Больше не показывать это
    12. </div>
    13. <button type="button" class="<?= $buttontype; ?>" data-dismiss="modal"><?= $buttontext; ?></button>
    14. </div>
    15. </div>
    16. </div>
    17. </div>
    18.  
    19. <style>
    20.  
    21. .modal-footer {
    22.     display: flex;
    23.     flex-wrap: wrap;
    24.     align-items: center;
    25.     justify-content: flex-end;
    26.     padding: 0.75rem;
    27.     border-top: 0 solid #0079f3;
    28.     border-bottom-right-radius: 0.3rem;
    29.     border-bottom-left-radius: 0.3rem;
    30.     background: #e1e1e1;
    31. }
    32.  
    33. </style>
    34.  
    35. <script>
    36. function explode(){
    37. // $(document).ready(function() {
    38. $("#staticBackdrop").modal('show');
    39. // });
    40. }
    41.  
    42. setTimeout(explode, <?= $sec; ?>);
    43.  
    44. </script>
    45.  
    46. <script type = "text/javascript">
    47.  
    48. $(document).ready(function(){
    49.     var my_cookie = $.cookie($('.modal-check').attr('name'));
    50.     if (!my_cookie) {
    51.          $('#myModal').modal('show');
    52.     }
    53.  
    54.     $(".modal-check").change(function() {
    55. if($(this).prop('checked')){
    56.         $.cookie($(this).attr("name"), $(this).prop('checked'), {
    57.             path: '/',
    58.             expires: 1
    59.         });
    60. }
    61.     });
    62. });
    63.  
    64. </script>
    Но, как бы я не мучался, не получается и все. Может в моём коде есть какая-то грубая ошибка? Буду признателен мастерам с черным поясом по javascript.
     
  2. ADSoft

    ADSoft Старожил

    С нами с:
    12 мар 2007
    Сообщения:
    3.824
    Симпатии:
    738
    Адрес:
    Татарстан
    1. У вас вызов в таймере функции показа окна идёт всегда, без проверки есть ли куки
    2. Проверка наличия чекбокса идёт при загрузке скрипта, в момент когда чекбокса и не видно - запись Кук нужно вешать на событие change чекбокса.

    Кароче нет у вас понимания как js работает, что такое события и что за чем идет... А черных поясов для этого и не нужно... Это основы
     
  3. Вероломство

    Вероломство Активный пользователь

    С нами с:
    19 июн 2017
    Сообщения:
    615
    Симпатии:
    24
    самое простое условие наскоряк которое пришло в голову

    пишем событие в сессию с ключом, например - modal, проверяем: если есть сессия с ключом modal, то (внутри условия размещаем html модалки), в конце условия делаем unset сессии modal, в скриптах размещаем код открывающий модалку через 3 секунды, если сработает условие на сессию, то скрипту станет виден атрибут модалки по которому делается show, так как мы сделали unset сессии modal, то после перезагрузки страницы условие не сработает, атрибут модалки для её открытия не будет виден для show и модалка не откроется пока не наступит условие наличия сессии modal :)