触发响应式 jQuery 函数时，该函数不会停止触发

Question

我在响应触发某些 jQuery / JavaScript 函数时遇到问题。我查看了以下文章：https://www.fourfront.us/blog/jquery-window-width-and-media-queries，其中描述了如何仅在特定屏幕分辨率下触发 JavaScript / jQuery 函数，但使用与 CSS 媒体查询相同的分辨率（例如，宽度在 0px 到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 代码来实现我的模态窗口功能。我希望这个模态功能只能在桌面上工作并打开一个模态，而不是在小分辨率（问题 是上面文章中的 jQuery 解决方案确实有效，但是一旦我在桌面上打开我的 HTML 页面并将窗口 resize手机屏幕分辨率模态功能仍然触发，因此模态窗口仍然打开，我想在移动分辨率（
我认为它与模态函数仍在运行有关，一旦我将其从桌面分辨率调整为手机分辨率。如果我在不刷新页面的情况下从桌面分辨率调整为手机分辨率，有没有办法让它工作，以便模式功能停止触发？

Answer 1

Erm.. 您为激活器分配了一个事件处理程序，但在调整“桌面”大小时不会将其删除。如果从 CheckSize 函数中移动或复制条件：

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

到第一个模态事件：

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

它会起作用的。