сохранение состояния модальной коробки с куки

Question

Я создал всплывающее модальное окно для моей HTML-страницы, используя этот учебник:

https://www.w3schools.com/howto/howto_css_modals.asp

То, что я хотел бы сейчас сделать с помощью файлов cookie, - это помнить, было ли модальное отображение или скрытие, когда пользователь покинул страницу, и после того, как он вернулся, и модальное отображение, когда пользователь покинул страницу, оно должно отображаться как отображаемое.

Это код скрипта для модального всплывающего окна:

    <script>

var modal = document.getElementById('myModal');
var btn = document.getElementById("logo");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
    modal.style.display = "block";
}


span.onclick = function() {
    modal.style.display = "none";
}


window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

</script>

Таким образом, когда пользователь нажимает на логотип, появляется модальное окно, а когда пользователь нажимает в любом другом месте, оно исчезает.

Теперь здесь я пытался настроить cookie-файл, чтобы он запоминал состояние модального окна и загружал его соответственно, когда пользователь возвращается на страницу:

<script>

$(document).ready(function(){

    var expiration = new Date(Date.UTC(2018, 8, 1)).toUTCString();

    var cookie = escape(popup) + "=" + escape(modal.style.display) + ";expires=" + expiration + ";";

    document.cookie = cookie;

    // read cookie

    var state = modal.style.display

    var key = modal.style.display + "=";

    var cookies = document.cookie.split(';');

    for (var i = 0; i < cookies.length; i++) {

        var cookie = cookies[i];

        while (cookie.charAt(0) === ' ') {

            cookie = cookie.substring(1, cookie.length);
        }

            if (cookie.indexOf(key) === "block") {

                modal.style.display = "block";
            }

            else if (cookie.indexOf(key) === "none") {

                modal.style.display = "none";

            }
    }

});

</script>

Я не уверен, правильно ли я это делаю. Я искал в Интернете решение, но ничего не смог найти.

Еще одна вещь. Если в браузере отключен JavaScript, я хочу, чтобы модальное поле отображалось постоянно. Как бы я поступил так?

Заранее спасибо.

Answer 1

К сожалению (по уважительной причине) этот код выдаст ошибку, потому что инструмент сниппета не позволяет устанавливать COOKIE.

Краткое резюме:

1) Созданы openModal () и closeModal () для управления модальным окном - таким образом, код может существовать в одном месте, но запускаться при разных условиях. Это значительно облегчает обслуживание и продвижение вперед.

2) Стили для модального окна устанавливаются так, как будто модальный дизайн является частью страницы (без JavaScript). Таким образом, при загрузке страницы, независимо от JS, будет присутствовать модальное значение.

3) Я скопировал код COOKIE W3C (находится здесь: https://www.w3schools.com/js/js_cookies.asp) для установки и получения значений COOKIE.

4) Вместо того, чтобы скачивать jQuery только для команды $ (document) .ready (), я создал функцию documentLoad (), которая даст вам те же результаты.

var modal = document.getElementById('myModal');
var btn = document.getElementById("logo");
// target the modal element for it's close button
var span = modal.getElementsByClassName("close")[0];

function openModal(){
  modal.style.display = 'block';
  setCookie("modalDisplay", true, 365);
}
function closeModal(){
  modal.style.display = 'none';
  setCookie("modalDisplay", false, 365);
}

// Events to listen for from the HTML
span.addEventListener('click', function(){
  closeModal();
});
btn.addEventListener('click', function(){
  openModal();
});
window.addEventListener('click', function(event) {
  if (event.target == modal) {
      closeModal();
  }
});

// COOKIE code copied from W3C
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

function documentLoad(){
  modalDisplay = getCookie( 'modalDisplay' );
  // if the modal has already been closed...
  if( !modalDisplay ){
    closeModal();
  }
}
// instead of jQuery's document.ready() this code is 
// calling a function on its own
documentLoad();

#myModal{
  display: block;
  padding: 35%;
  background-color: rgba( 0, 0, 0, 0.75 );
  color: white;
  position: fixed;
  top: 0;
  left: 0;
}

<button id="logo">Open Modal</button>

<div id="myModal">TEST MODAL <button class="close">X</button></div>