Question

我知道这个问题经常被问到，但是我发现的所有答案都具有相同的答案，这对大多数人来说是很棒的，但不适用于我的代码，

这是打开我的模态的Java语言

$(".button-b, .item, .item2, .button-a, .port_item").on("click", function() {
    var modal = $(this).data("modal");
    $(modal).show();
});

$(".modal").on("click", function(e) {
    var className = e.target.className;
    if(className === "modal" || className === "closex"){
      $(this).closest(".modal").hide();
    }
});

我可以只将$("html","body").addClass("modal-open");添加到.button-a, .button-b").on("click", function() {，将$("html","body").removeClass("modal-open");添加到$(".modal").on("click", function(e) {，但是因为我已经链接了.button-b. .button-a，所以使用这些样式的任何按钮也会添加{ {1}}指向正文，这意味着当有人单击未打开模式框的按钮时，屏幕冻结，并且您无法滚动

我试图提出一些解决方案：

.modal-open

但是我完全不知道我在javascript中做什么，所以它不起作用-我想要做的是当模态有效/显示为向身体添加$(document).ready(function(){ var modal = $(this).data("modal"); if (modal = show) { $("html","body").addClass("modal-open"); } else { $("html","body").removeClass("modal-open") } });时，单击具有.modal-open样式的任何按钮时没有添加.modal-open，但是仅当显示模式时，我才猜测我需要一个事件侦听器吗？任何帮助都会很棒。

Answer 1

首先，以下内容不正确...

$("html","body").addClass("modal-open");

正确的格式是在同一字符串中列出选择器...

$("html, body").addClass("modal-open");

如果我正确理解了您的问题，那么问题是您在$(modal)上进行了隐藏操作，而与$(this).data("modal")的结果是否无关...因此添加了{{1} }在同一函数中将导致未显示任何模态，但主体无法使用。

所以我相信这更符合您的需求...

addClass

如果模态是活动的/显示的，请添加modal-open而不是单击

1 个答案: