javascript - 当用户单击模态触发器时，模态未打开

Question

我的网站上有一个非常基本的模态功能，它在轨道上方显示一个点赞、转发和评论模态，其中已单击触发器。

但是，由于轨道是通过 PHP 按程序显示的，我不得不以一种奇怪的方式进行设置。

这是我的简化标记:

<div class="f-wave-send">
    <div class="t__trigger-actions"> <!-- this is the modal trigger button !-->
        <span id="trigger-actions-modal"></span>
    </div>
    <div class="f-track__actions" id="track-actions"> <!-- this is the modal !-->
        <div class="close-actions"> <!-- this is the close button !-->
            <span></span>
        </div>
        <div class="f-track-actions-inner">
            <!-- modal contents !-->
        </div>
    </div>
</div>

此标记在整个页面上重复(以表示数据库中的每个轨道)；类似于 Facebook 的 feed。

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

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

我已尽可能发表评论，试图解释正在发生的事情。但我会在这里再次解释一下；

当用户单击文档中的许多模式触发器之一时，它将获取该触发器模式，并显示它(并添加类 modal__open 到它的父容器)。

如果用户单击关闭按钮(或文档)，则关闭相同的模式。

我已经尝试解决这个问题有一段时间了，因此感谢所有帮助(和建议)。

谢谢。

编辑:

我想要发生的是，当模式打开时，它仅在用户单击模式之外或单击关闭按钮时关闭(如果有意义的话)。

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>