如何加载leanmodal div内容onclick

时间:2013-08-04 23:32:09

标签: javascript jquery html css modal-dialog

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

任何帮助将不胜感激!我是新人并且学习所以这一切都非常令人兴奋。

1 个答案:

答案 0 :(得分:0)

模态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()方法隐藏它。