如何加载leanmodal div内容onclick

Question

My store's collection pages have the quick-view feature where hovering over products images allow you to click 'Quick View' to open a modal dialog window with summary info about the products. This is done with the leanModal plugin.

See: http://froy.com/collections/beds-mattresses for example. Store is powered by Shopify.

The problem is, when the page initially loads, all the elements within the modal are loaded despite being hidden. This unnecessarily slows down the site. I'd like to load the contents within the modal only after the user clicks on 'Quick View.'

<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>

Script:

$('.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

Any help would be much appreciated! I'm new and learning so this is all very exciting.

Answer 1

The purpose of the modal div is to have a precise view on one specific element. In your case (on the webpage you provided), the modal is loaded for each element, which breaks the sense of what you're trying to achieve.

I've never used the leanModal plugin but I guess you could try doing the following:

When the "Quick view" is pressed, find the closest element with jQuery .closest() method by searching the element with class .quick_shop, THEN leanModal that single element and display it:

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

Once the modal is closed you can delete the element instead of hiding it with the jQuery's remove() method.