如何加載leanmodal div內容onclick

Question

我的商店的收藏頁面具有快速查看功能，其中將鼠標懸停在產品圖像上，您可以單擊“快速查看”以打開模式對話框窗口，其中包含有關產品的摘要信息。 這是通過leanModal插件完成的。

請參閱： http ： //froy.com/collections/beds-mattresses 。 商店由Shopify提供支持。

問題是，當頁面最初加載時，盡管被隱藏，但模態中的所有元素都被加載。 這不必要地減慢了網站的速度。 我想在用戶點擊“快速查看”后才加載模態中的內容。

<div class="quick_shop"> <!--This is the modal trigger-->
  <div class="quickview-text">Quick View</div>
</div>
<div class="modal">
  <!--All contents of the modal dialog window go in this div-->
</div>

腳本：

$('.quick_shop').leanModal(); //Calls the function on the modal trigger
(function($){$.fn.extend({leanModal:function(_1)...});})(jQuery); 
//The above line of code is for leanModal. I didn't paste entire thing cause it's long

任何幫助將非常感激！ 我是新人並且學習所以這一切都非常令人興奮。

Answer 1

模態div的目的是對一個特定元素有一個精確的視圖。 在你的情況下（在你提供的網頁上），為每個元素加載模態，這打破了你想要實現的目標。

我從未使用過leanModal插件，但我猜您可以嘗試執行以下操作：

當按下“快速視圖”時，通過使用類.quick_shop搜索元素，使用jQuery .closest（）方法找到最接近的元素，然后使用單個元素的leanModal並顯示它：

$(".quickview-text").on("click", function(e){ $(this).closest(".quick_shop").leanModal(); //Then display it with .show() if it's hidden by default });

關閉模態后，您可以刪除元素，而不是使用jQuery的remove（）方法隱藏它。