Modal window for several products

Question

I have a problem. I need to make a modal window for each product, but in the modal window, all products only display the last product. I tried to assign id identifiers, but then only the modal window of the first product works.

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

I suggest you change to this which will show the nearest modal and close the nearest modal. Your current code selects all items with class modal

Note I use jQuery $(function() { ... }); instead of 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

Because you are selecting all the modals on the page and showing them all.

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

You are not selecting the modal that corresponds with what you picked. In your case the modal is beside the image so grab the next element and display it.

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

Other option people tend to do is data attributes and ids. You add a data attribute that has the id of the item you want to show. So you read the attribute, and than show that item.

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

and than the JavaScript would look at the attribute

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

Answer 3

If you are in need of your modals to display dynamic content, and you are not using a framework like Angular or React to update the components for you - then you will want to use a dedicated modal library. This will help you manage multiple modal instances, as well as all of your display bindings.

I have used Bootbox.js in the past for this purpose - if you are using Bootstrap, check it out. If you are not using Bootstrap, there are other plugins that will help you accomplish the same task.

The trouble with modals is that by design there can only be a single instance at any one time (think Singleton). So each time you call it, you are calling the same instance. So...if you try to populate multiple instances - it wont happen. Only or last data set will be applied.

The problem with using

http://bootboxjs.com/