jquery彈出圖像

在單個html頁面中有三個或更多圖像，並且需要在點擊特定圖像後在彈出窗口中顯示相同的圖像。有什麼我可以用這個嗎？jquery彈出圖像

<img class="wp-image-4596 size-medium" src="img1.jpg" alt="img1" width="232" height="300"> 
<img class="wp-image-4596 size-medium" src="img2.jpg" alt="img2" width="232" height="300"> 
<img class="wp-image-4596 size-medium" src="img3.jpg" alt="img3" width="232" height="300">

來源

2017-06-06 RD Mage

您可以通過圖片上的

$('.wp-image-4596').click(function(){ $('#popupimage').attr('src', $(this).attr('src')); });

<img class="wp-image-4596 size-medium" src="img1.jpg" alt="img1" width="232" height="300"> <img class="wp-image-4596 size-medium" src="img2.jpg" alt="img2" width="232" height="300"> <img class="wp-image-4596 size-medium" src="img3.jpg" alt="img3" width="232" height="300"> <div id="popup"> <img src='' id="popupimage"> </div>

添加一個onclick功能，這將獲得點擊圖像的來源和使用它作爲源爲你彈出做到這一點在JavaScript圖片

來源

2017-06-06 08:52:02 perseusl

這顯示圖像在一個單獨的div，但不彈出模式窗口，並顯示內部的圖像。如果你的要求是在另一個單獨的div中顯示圖像，那麼這個答案很適合！ – PrashanthBR

@PrashanthBR是的。而FYI div可以通過添加正確的CSS和屬性來成爲一種模式。這就是爲什麼我在代碼中添加「<！ - 這是你的流行音樂 - >」 – perseusl

你可以用bootstrap模態來做到這一點。檢查this我的答案相同。

來源

2017-06-06 08:36:10 PrashanthBR

嘿男人使用lightbox2 jQuery插件，這有很酷的效果和功能。

如果你喜歡使用更簡單的插件，那麼你可以使用magnafic彈出式插件。

來源

2017-06-08 14:08:37

jquery彈出圖像

回答

相關問題