ユーザーがモーダルトリガーをクリックしたときにモーダルが開かない

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> 

。 に似ています。さんのフィード。

これは、すべてのモーダルの機能を制御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 
    } 
}); 

私は何が起こっているかを説明しようと、可能な場合はコメントしています。しかしここでもう一度説明します。

多くモーダルの1をユーザーがクリックするとdocument内トリガー

は、それはそれは、モーダルをトリガー取得し、それを表示（およびそれに modal__openだクラス親コンテナを追加）します。

ユーザが同じモーダルその閉じる閉じるボタン（または文書に）をクリックした場合。

私は今、そのすべてのヘルプ（や提案が）高く評価されながら、少しのためにこれを理解しようとして立ち往生してきました。

ありがとうございました。

EDIT：

私は起こるしたい何がモーダルが開いたときに、ユーザーがモーダルのうち、OR [閉じる]ボタンをクリックしたとき（つまり、理にかなっている場合）、それだけで閉じ、です。

Answer 1

これは何ですか？ - parentの代わりにclosest()を追加しました。 - 「開く」ボタンに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>