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

Question

我在我的网站上有一个非常基本的模态功能，显示like，转发评论模态，在轨迹上方，点击触发器。

但是，我不得不以奇怪的方式进行设置，因为曲目通过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到它的父容器）。

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

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

谢谢。

编辑：

我希望发生的是，模态打开时，它，只有当用户点击了模态的，或在关闭按钮（如果是有道理的）关闭。

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>