多个产品的模态 window

Question

我有问题。我需要为每个产品制作模态window，但在模态window中，所有产品只显示最后一个产品。我尝试分配 id 标识符，但只有第一个产品的模态 window 有效。

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

我建议你改成这个，它会显示最近的模态并关闭最近的模态。您当前的代码选择了所有具有 class 模态

的项目

注意我使用 jQuery $(function() { ... }); 而不是 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

如果您需要模态框来显示动态内容，并且您没有使用 Angular 或 React 之类的框架来为您更新组件 - 那么您将需要使用专用的模态库.这将帮助您管理多个模式实例，以及所有显示绑定。

我过去曾为此目的使用过 Bootbox.js - 如果您正在使用 Bootstrap，请检查一下。如果您不使用 Bootstrap，还有其他插件可以帮助您完成相同的任务。

模式的问题在于，根据设计，任何时候只能有一个实例（想想单例）。所以每次你调用它，你都在调用同一个实例。所以...如果您尝试填充多个实例 - 它不会发生。将仅应用或最后一个数据集。

使用问题

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');

多个产品的模态 window

Modal window for several products

javascript

jquery

modal-window