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

但是，由于轨道是通过 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 的提要。

这是控制所有模态功能的 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
    }
});

我尽可能地发表评论，试图解释发生了什么。但我会在这里再次解释;

当用户点击 document 中的 许多 模式触发器之一时，它将获取触发模式并显示它（并将类 modal__open 添加到它的父容器中）。

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

我一直在试图弄清楚这一点，所以所有的帮助（和建议）都值得赞赏。

谢谢。

编辑 ：

我想要发生的是，当模式打开时，它仅当用户点击模式之外或关闭按钮（如果有意义）时才关闭。