Question

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

enter image description here

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

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

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

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

$('.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');

Answer 3

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

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

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

使用

的问题

http://bootboxjs.com/

几种产品的模态窗口

3 个答案: