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

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的提要。

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