0

我有个问题。我需要为每个产品制作一个模态窗口，但是在模态窗口中，所有产品只显示最后一个产品。我试图分配 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>

4

3 回答 3

0

我建议您更改为这将显示最近的模态并关闭最近的模态。您当前的代码选择所有具有类模式的项目

注意我使用 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>

于 2017-07-06T15:12:34.130 回答
0

因为您正在选择页面上的所有模态并将它们全部显示出来。

$('.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');
于 2017-07-06T15:13:27.553 回答
-3

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

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

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

使用问题

http://bootboxjs.com/

于 2017-07-06T15:12:46.580 回答