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代码来实现我的模态窗口功能。我希望此模式函数仅在桌面上工作并打开模式，而不是在小分辨率（<767 px）上打开。但是，我面临的问题是上面文章中的jQuery解决方案确实有效，但是一旦我在桌面上打开HTML页面并调整窗口大小到手机屏幕分辨率，模态功能仍然会触发，因此模态窗口仍会打开，我想在移动分辨率（<767px）上停下来。但是，如果我首先以手机分辨率加载HTML页面，则不会启用模式函数，因此，它便按照我的意思起作用了。

我认为它与模态功能仍在运行有关，一旦我将其从桌面分辨率调整为手机分辨率即可。有没有一种方法可以使我在不刷新页面的情况下从台式机分辨率调整为手机分辨率而使模式功能停止触发？

Answer 1

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

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

到第一个模态事件：

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

它将起作用。

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

1 个答案: