如何加載leanmodal div內容onclick

我的商店的收藏頁面具有快速瀏覽功能，您可以在產品圖像上懸停以便點擊「快速查看」以打開帶有產品摘要信息的模式對話窗口。這是通過leanModal插件完成的。例如如何加載leanmodal div內容onclick

例如：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

任何幫助，將不勝感激！我是新的和學習，所以這是非常令人興奮的。

來源

2013-08-04 user2651351

模態div的目的是對一個特定元素有一個精確的視圖。就你的情況而言（在你提供的網頁上），每個元素都會加載模態，這打破了你想要達到的目標。

我從來沒有使用leanModal插件，但我想你可以嘗試做如下：

當按下「快速查看」，通過搜索找到元素使用jQuery .closest（）方法最接近的元素帶班.quick_shop，THEN 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（）方法隱藏它的元素。

來源

2013-10-08 02:53:04 Alex

如何加載leanmodal div內容onclick

回答

相關問題