我商店的产品系列页面具有快速查看功能,您可以将鼠标悬停在产品图片上,然后单击“快速查看”以打开包含产品摘要信息的模式对话框窗口。这是通过 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
任何帮助将不胜感激!我是新手,正在学习,所以这一切都非常令人兴奋。
最佳答案
模态 div 的目的是对一个特定元素有一个精确的 View 。 在你的情况下(在你提供的网页上),模式是为每个元素加载的,这打破了你想要实现的目标。
我从未使用过 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() 方法将其隐藏。
关于javascript - 如何加载 leanmodal div 内容 onclick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18048682/