3

我的商店的收藏页面具有快速查看功能，将鼠标悬停在产品图像上可让您单击“快速查看”以打开包含产品摘要信息的模式对话框窗口。这是通过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

任何帮助将非常感激！我是新手，正在学习，所以这一切都非常令人兴奋。

4

1 回答 1

0

模态 div 的目的是对一个特定元素有一个精确的视图。在您的情况下（在您提供的网页上），会为每个元素加载模式，这会破坏您想要实现的目标。

我从来没有使用过 leanModal 插件，但我想你可以尝试执行以下操作：

当按下“快速视图”时，通过使用 .quick_shop 类搜索元素，使用 jQuery .closest() 方法找到最接近的元素，然后使用该单个元素进行leaModal 并显示它：

$(".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-08T02:53:04.183 回答