Question

我有一个模态，在滚动后显示并消失在页面顶部。但是，如果我按下它上面的关闭按钮，我希望它不再显示。（现在，如果我关闭模态，它会一遍又一遍地显示，而且非常烦人）

$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 400) {
        $('#modal-name').css({"display":"block"});
    } else {
        $('#modal-name').fadeOut();
    }
});
$(document).ready(function() {
    $(".close-modal, .modal-sandbox").click(function(){
        $(".modal").css({"display":"none"});
    });
});

Answer 1

使用标记shouldDisplayModal并将其保存到window.localStorage，如下所示：

var shouldDisplayModal = localStorage.getItem("shouldDisplayModal") == null ? (localStorage.setItem("shouldDisplayModal", true) || localStorage.getItem("shouldDisplayModal")) : localStorage.getItem("shouldDisplayModal");

$(document).scroll(function () {
  if (shouldDisplayModal) {
    var y = $(this).scrollTop();
    if (y > 400) {
        $('#modal-name').css({"display":"block"});
    } else {
        $('#modal-name').fadeOut();
    }
  }
});
$(document).ready(function() {
    $(".close-modal, .modal-sandbox").click(function(){
        $(".modal").css({"display":"none"});
        localStorage.setItem("shouldDisplayModal", false);
    });
});

JS - 在滚动时显示模态并阻止它在关闭后再次显示

1 个答案: