Блог

Главная - Вопросы по программированию - Откройте модальный режим на основе списка событий и настроек файлов cookie

Откройте модальный режим на основе списка событий и настроек файлов cookie

#javascript #html #jquery

Вопрос:

Поэтому у меня возникли некоторые проблемы с этим, и я хотел посмотреть, может ли кто-нибудь помочь мне получить какие-то зацепки и / или помочь мне понять, что я могу делать неправильно и что мне нужно делать.

Пожалуйста, запустите приведенный ниже скрипт для небольшого примера прокрутки средней страницы.

Итак, вот что делает сценарий:

  1. Когда пользователь загружает страницу и прокручивает ее на полпути вниз, откроется модальный файл, в котором будет установлен файл cookie, срок действия которого истекает через 30 дней.

Итак, вот некоторые вещи, в которых мне нужна помощь:

  1. Как мне проверить, есть ли набор файлов cookie, и если есть, не вызывайте прослушиватель событий прокрутки.
  2. Таким образом, внутри trigger_modal функции user_logged_in элемент вернет логическое значение, которое при входе в WordPress будет истинным, в противном случае оно будет ложным. Как бы я получил следующее условное:

Если пользователь вошел в систему, не устанавливайте файл cookie и продолжайте открывать модальный файл, в противном случае, если пользователь не вошел в систему, установите файл cookie и открывайте модальный файл только в том случае, если файл cookie не установлен.

Итак, вот код, который у меня есть:

 $(document).ready(function () {
    // Trigger the scroll event listener.
    window.addEventListener("scroll", function() {
        // Select the modal element.
        let element = document.querySelector('.modalElement');
        // The element is in the viewport.
        if (is_in_viewport(element)) {
            // Trigger the modal
            trigger_modal(element);
        }
    });

    /**
     * Trigger modal
     *
     * @param element
     */
    function trigger_modal(element)  {
        // The correct modal_target gets pulled amp; user is logged in
        const modal_target = element.getAttribute('data-target');
        const user_logged_in = document.body.classList.contains('logged-in');

        // This grabs the correct stored cookie.
        let stored_cookie = get_cookie('acceptedPardot'   modal_target   'Cookie');

        // If the cookie doesn't exist, set the cookie and allow for opening the modal
        if (!stored_cookie) {
            set_cookie('acceptedPardot'   modal_target   'Cookie', 'true', 30);
            $(modal_target).modal('toggle');
        }
    }

    /**
     * Set cookie
     *
     * @param name
     * @param value
     * @param days
     * @return {string}
     */
    function set_cookie(name, value, days) {
        let cookie = name   "="   encodeURIComponent(value);
        if (typeof days === "number") {
            cookie  = "; time="   (days * 24 * 60 * 60);
            document.cookie = cookie;
            return cookie;
        }
    }

    /**
     * Get cookie
     *
     * @param name
     * @return {string|null}
     */
    function get_cookie(name) {
        let cookie_array = document.cookie.split(";");
        for (let i = 0; i < cookie_array.length; i  ) {
            const cookie_pair = cookie_array[i].split("=");
            if (name === cookie_pair[0].trim()) {
                return decodeURIComponent(cookie_pair[1]);
            }
        }

        return null;
    }

    /**
     * Check if element is in viewport
     *
     * @param element
     * @return {boolean}
     */
    function is_in_viewport(element) {
        const rect = element.getBoundingClientRect();
        return (
            rect.top >= 0 amp;amp;
            rect.left >= 0 amp;amp;
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) amp;amp;
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    }
}); 
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<div class="modalElement" data-toggle="modal" data-target="#modal-<?= $id ?>"></div>
<div class="modal fade" id="modal-<?= $id ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">amp;times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Ответ №1:

Похоже, это та логика, которую вы описали.

 function trigger_modal(element) {
  // The correct modal_target gets pulled amp; user is logged in
  const modal_target = element.getAttribute('data-target');
  const user_logged_in = document.body.classList.contains('logged-in');

  if (user_logged_in) {
    // If user logged in, show modal unconditionally
    $(modal_target).modal('toggle');
  } else {
    // This grabs the correct stored cookie.
    let stored_cookie = get_cookie('acceptedPardot'   modal_target   'Cookie');

    // If the cookie doesn't exist, set the cookie and allow for opening the modal
    if (!stored_cookie) {
      set_cookie('acceptedPardot'   modal_target   'Cookie', 'true', 30);
      $(modal_target).modal('toggle');
    }
  }
}
Метки: