Question

我的网站上有一个非常基本的模态功能，显示 like，repost＆amp;评论模式，在轨道上方，已点击触发器。

然而，由于曲目是通过 PHP 程序显示的，所以我不得不以奇怪的方式进行设置。

这是我简化的标记：

$(".t__trigger-actions").click(function(){ // when one of the modal triggers is clicked
    var parent = $(this).parent();
    parent.find(".f-track__actions").css("display", "block"); // get the modal within ONLY the same container to display
    parent.addClass("modal__open"); // and add the class modal__open to the container
});
$(".close-actions").click(function(){ // when the close button is clicked
    $(".modal__open").children(".f-track__actions").css("display", "none"); // hide the modal
    $(".f-wave-send").removeClass("modal__open"); // remove the modal__open class from the container
});
$(document).bind('click', function(e) { // if user clicks on anything but the main container
    if(!$(e.target).is('.modal__open')) {
        $(".modal__open").children(".f-track__actions").css("display", "none"); // hide the modal
        $(".f-wave-send").removeClass("modal__open"); // remove the modal__open class from the container
    }
});

此标记在整个页面中重复（表示数据库中的每个轨道）;类似于 Facebook 的Feed。

这是控制所有模态功能的 JS ：

document

我已经评论过可能尝试解释发生了什么。但我会再次在这里解释一下;

当用户点击modal__open中的多个模式触发器之一时，它会触发模态并显示它（并将类{{1}}添加到它的父容器。）

如果用户点击关闭按钮（或文档上），请关闭相同的模式。

我现在被困在试图弄清楚这一点，所以所有的帮助（和建议）都表示赞赏。

感谢。

修改：

我想要发生的是，当模态打开时，它仅在用户点击模态时关闭，或者在关闭按钮上关闭（如果有意义的话）。

Answer 1

这是你想要的吗？ - 添加了closest()而不是parent，以防它不是直接父级。 - 在“打开”按钮中添加了e.stopPropagation()。

$(document).ready(function() {
  $(".t__trigger-actions").click(function(e) {
    var topClass = $(this).closest('.f-wave-send');
    topClass.find(".f-track__actions").css("display", "block");
    topClass.addClass("modal__open");
    $(this).next().addClass("modal__open");

    e.stopPropagation();
  });
  $(".close-actions").click(function() {
    $(".modal__open").children(".f-track__actions").css("display", "none");
    $(".f-wave-send").removeClass("modal__open");
  });


  $(document).bind('click', function(e) {

    var container = $(".modal__open");

    if (!container.is(e.target) && container.has(e.target).length === 0) {
      $(".modal__open").children(".f-track__actions").css("display", "none");
      $(".f-wave-send").removeClass("modal__open");
      $(".f-track__actions").removeClass("modal__open");
    }

  });
})

.f-track__actions {
  display: none;
}
.f-wave-send {
  border: 2px solid red;
}
.t__trigger-actions {
  height: 40px;
  border: 1px solid green;
}
.f-track__actions {
  height: 60px;
  border: 1px solid blue;
}
.close-actions {
  display: inline-block;
  width: 50px;
  height: 30px;
  background-color: #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="f-wave-send">
  <div class="t__trigger-actions">
    <!-- this is the modal trigger button !-->
    <span id="trigger-actions-modal">Open</span>
  </div>
  <div class="f-track__actions" id="track-actions">
    <!-- this is the modal !-->
    <div class="close-actions">
      <!-- this is the close button !-->
      <span>Close</span>
    </div>
    <div class="f-track-actions-inner">
      <input/>
      <!-- modal contents !-->
    </div>
  </div>
</div>

当用户点击模态触发时，模态不会打开

1 个答案: