幾種產品的模態窗口

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

我建議你換到這裏面會顯示最近的模式和關閉模式最接近。您當前的代碼選擇與類模式的所有項目

注意使用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，還有其他插件可以幫助您完成相同的任務。

模態的問題在於，設計中任何時候都只能有一個實例（想想Singleton）。所以每次你調用它時，你都在調用同一個實例。所以......如果你試圖填充多個實例 - 它不會發生。將僅應用或最後的數據集。

使用

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