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 の目的は、1 つの特定の要素を正確に把握することです。あなたの場合 (提供した Web ページで)、要素ごとにモーダルが読み込まれるため、達成しようとしていることがわかりません。

私は、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() メソッドで非表示にする代わりに削除できます。

于 2013-10-08T02:53:04.183 に答える