複数の製品のモーダルウィンドウ

Question

問題があります。私は各製品についてモーダルウィンドウを作成する必要がありますが、モーダルウィンドウではすべての製品が最後の製品のみを表示します。私はID識別子を割り当てようとしましたが、最初の製品のモーダルウィンドウだけが機能します。

window.onload = function() { 
 
    $('.img-for-modal').click(function() { 
 
    $('.modal').css('display', 'block'); 
 

 
    }); 
 

 
    $('.close').click(function() { 
 
    $('.modal').css('display', 'none'); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="products-wrap"> 
 
    <table class="product"> 
 
    <tr> 
 
     <td class="img" rowspan="3"> 
 
     <img class="img-for-modal" src="media/products-image/1.jpg"> 
 
     <div class="modal"> 
 
      <span class="close">&times;</span> 
 
      <img class="modal-img" src="media/products-image/1.jpg"> 
 
     </div> 
 
     </td> 
 
     <td class="product-info"> 
 
     <article>Lorem Ipsum is simply dummy text of the printing V1.0</article> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="product-info"> 
 
     <b>Цена: </b>200 руб. 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="product-delete"> 
 
     <a href="#">Добавить в корзину</a> 
 
     </td> 
 
    </tr> 
 
    </table>

Answer 1

私はあなたが最寄りのモーダルを表示し、最寄りのモーダルを閉じますどの本に変更示唆しています。あなたは動的なコンテンツを表示するためにあなたのモーダルを必要としている、とあなたがいる場合は、あなたの現在のコードは、私が代わりにwindow.onload = function() { ... }

$(function() { 
 
    $('.img-for-modal').click(function() { 
 
    $(this).next(".modal").show(); 
 
    }); 
 

 
    $('.close').click(function() { 
 
    $(this).closest(".modal").hide(); 
 
    }); 
 
});

.modal { display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="products-wrap"> 
 
    <table class="product"> 
 
    <tr> 
 
     <td class="img" rowspan="3"> 
 
     <img class="img-for-modal" src="media/products-image/1.jpg"> 
 
     <div class="modal"> 
 
      <span class="close">&times;</span> 
 
      <img class="modal-img" src="media/products-image/1.jpg"> 
 
     </div> 
 
     </td> 
 
     <td class="product-info"> 
 
     <article>Lorem Ipsum is simply dummy text of the printing V1.0</article> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="product-info"> 
 
     <b>Цена: </b>200 руб. 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="product-delete"> 
 
     <a href="#">Добавить в корзину</a> 
 
     </td> 
 
    </tr> 
 
    </table>

Answer 2

のjQueryの$(function() { ... });使うクラスモーダル

注意してすべての項目を選択し、 AngularやReactのようなフレームワークを使用してコンポーネントを更新するのではなく、専用のモーダルライブラリを使用することになります。これにより、複数のモーダルインスタンスとすべての表示バインディングを管理するのに役立ちます。

私は過去にこの目的のためにBootbox.jsを使用しました。あなたがブートストラップを使用している場合は、それをチェックしてください。ブートストラップを使用していない場合は、同じタスクを実行するのに役立つ他のプラグインがあります。

モーダルの問題は、一度に1つのインスタンスしか存在できないことです（シングルトンと考える）。あなたがそれを呼び出すたびに、あなたは同じインスタンスを呼び出しています。だから...複数のインスタンスを設定しようとすると、それは起こりません。唯一または最後のデータセットが適用されます。

あなたがページ上のすべてのモーダルを選択し、それらのすべてを見せているので

http://bootboxjs.com/

Answer 3

を使用しての問題点。

$('.modal').css('display', 'block'); 

あなたが選んだものに対応するモーダルを選択していません。あなたの場合、モーダルはイメージの横にあるので、次の要素をつかんで表示します。

$(this).next('.modal').css('display', 'block'); 

他の人が行う傾向のあるデータ属性とIDです。表示するアイテムのIDを持つデータ属性を追加します。だからあなたは属性を読んで、その項目を表示する。

<img class="img-for-modal" src="media/products-image/1.jpg" data-toggles="#modal1"> 
<div class="modal" id="modal1"> 

とJavaScriptより

は属性

var selector = $(this).data("toggles") 
$(selector).css('display', 'block'); 

になります