當用戶點擊模態觸發器時，模態不能打開

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>