При запуске адаптивных функций jQuery функция не прекращает работу - PullRequest
Новая
       5

При запуске адаптивных функций jQuery функция не прекращает работу

0 голосов
/ 29 августа 2018

У меня проблема с отзывчивым срабатыванием определенных функций jQuery / JavaScript. Я проверил следующую статью: https://www.fourfront.us/blog/jquery-window-width-and-media-queries, которая описывает, как запускать функцию JavaScript / jQuery только при определенном разрешении экрана, но с использованием того же разрешения, что и для медиазапросов CSS (например, между шириной От 0 до 767 пикселей). Это код, который я использую:

jQuery / JavaScript: 

// Function to open / close modal
function modal() {

    $(".activator").click(function() {
        $('.modal-wrapper').show();
    });

    $(".modal-overlay").click(function() {
        $('.modal-wrapper').hide();
    });
    $(".modal-close-button").click(function() {
        $('.modal-wrapper').hide();
    });
    $(document).keyup(function(e) {
        if (e.keyCode === 27) $('.modal-wrapper').hide(); // remove modal on escape press
    });

}

// Launch modal function responsively
$(document).ready(function() {
    // run test on initial page load
    checkSize();

    // run test on resize of the window
    $(window).resize(checkSize);
});

function checkSize() {
    if ($(".mytext").css("display") == "none") {
        modal();
    }
}

Используемый CSS: 

@media only screen and (min-width: 768px) {
    .mytext {
        display: none;
    }
}

Пожалуйста, смотрите мою полную модальную функцию на CodePen .

Я использую код jQuery выше для реализации моей модальной оконной функции. Я хочу, чтобы эта модальная функция работала и открывала модальные на рабочих столах, а не на небольших разрешениях (<767 px). Однако проблема <b>1018 *, с которой я сталкиваюсь, заключается в том, что решение jQuery из вышеприведенной статьи работает, но как только я открываю свою HTML-страницу на рабочем столе и изменяет размер окна на экране телефона Resolution, модальная функция все еще срабатывает, и, таким образом, модальное окно все еще открыто, что я хочу остановить на мобильных разрешениях (<767px). Однако модальная функция не срабатывает, если я сначала загружаю HTML-страницу с разрешением телефона, поэтому она работает так, как я хотел. <br />
Я думаю, что это связано с модальной функцией , которая все еще работает , как только я изменю ее размер с разрешения рабочего стола до разрешения телефона. Есть ли способ заставить его работать так, чтобы модальная функция перестала срабатывать, если я изменил размер с разрешения рабочего стола на разрешение телефона без обновления страницы?

1 Ответ

0 голосов
/ 29 августа 2018

Эээ ... вы назначаете обработчик события активатору, но не удаляете его при изменении размера "рабочего стола". Если вы перемещаете или копируете условие из функции CheckSize: 

if ($(".mytext").css("display") == "none")

К первому модальному событию: 

$(".activator").click(function()  {
if ($(".mytext").css("display") == "none")           $('.modal- 
wrapper').show();
});

Это будет работать.

...