如果模式处于活动状态/显示，则添加模式打开而不是单击

Question

我知道这个问题被问了很多，但我找到的所有答案都有相同的答案，这对大多数人来说都很棒，但它不适用于我的代码，

这是打开我的模态的Javascripts

$(".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();
    }
});

我可以向.button-a, .button-b").on("click", function() {添加$("html","body").addClass("modal-open");，$("html","body").removeClass("modal-open");添加到$(".modal").on("click", function(e) {，但由于我已经链接.button-b. .button-a使用这些样式的任何按钮，因此还可以向正文添加.modal-open，这意味着当有人单击未打开模式的按钮时，屏幕冻结，您无法滚动，

我试图想出一些方法来解决这个问题：

$(document).ready(function(){
    var modal = $(this).data("modal");
    if (modal = show) {
    $("html","body").addClass("modal-open");
  } else {
    $("html","body").removeClass("modal-open")
  }
});

但是我完全不知道我在javascript中做什么，所以它不起作用 - 我希望它做的是当模态处于活动状态/显示以向正文添加.modal-open时，这样当单击任何具有.button-b, .button-a样式的按钮时，它就不会添加.modal-open，但只有在显示模态时， 我猜我需要一个事件侦听器？任何帮助都会很棒。

Answer 1

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

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

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

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

如果我正确理解您的问题，那么问题在于您正在对$(modal)进行隐藏，而与是否有$(this).data("modal")的结果无关......因此，在同一函数中添加addClass会导致不显示模态，但主体不可用。

所以我相信这更符合你想要的......

$(".button-b, .item, .item2, .button-a, .port_item").on("click", function() {
  var modal = $(this).data("modal");
  if (modal) {
    $(modal).show();
    $("html, body").addClass("modal-open");
  }
});
$(".modal").on("click", function(e) {
  var className = e.target.className;
  if(className === "modal" || className === "closex"){
    $(this).closest(".modal").hide();
    $("html, body").removeClass("modal-open");
  }
});