0

http://isotope.metafizzy.co/のプラグインを使用isotopeしてグリッド レイアウトを作成しています。いずれかのグリッドをクリックすると、詳細を示すモーダル ポップアップが表示されます。モーダル ポップアップを閉じると、コントロールは古いアイソトープ グリッド レイアウトに戻ります。モーダル ポップアップのコンテンツはhidden、アイソトープ アイテムの下にあります。モーダル ポップアップのコンテンツが正しく表示されない問題がありました。それで、私がしたことは、アイソトープのグリッド<a>項目のいずれかをクリックして、使用し$.isotope('destroy');ました. そうして初めて、モーダルポップアップが正しく機能しました。さらに、モーダル ポップアップを閉じると、次のコードを使用して同位体グリッドを再初期化します。

    $("#container").isotope({
     itemSelector:".item",
     masonry:{
     columnWidth:100,
     gutterWidth:20
     },
     animationOptions:{
     duration: 750,
     easing: 'linear',
     queue: false
    }
    });

要素のイベントreturn false;を処理するすべての関数の最後に(の関数を使用して) 追加しました。<a>onclickjQuerydelegate()

再初期化すると、ページはスクロールして一番上に戻ります。それ以外は、ページの使い勝手に問題はありません。私は立ち往生しています。助けてください。

4

2 に答える 2

0

私はあなたが使用しているプラ​​グインにあまり精通していませんが、要素isotopeをクリックした結果としてそのページがスクロールするのを防ぐことができます。<a>

の代わりにreturn false、を試すことができますpreventDefault()。

クリックハンドラー（たとえば）では、これを行います-

$('a').on('click',function(e){
  // other code here
  e.preventDefault();
});
于 2012-07-29T15:53:25.750 に答える
0

モーダル ウィンドウと Isotope で destroy メソッドや特別なトリックを使用する必要はありません。静的コンテンツまたは動的コンテンツを表示するために、これまたは同様のものを試しましたか? ここでは、より多くのものを明らかにするために機能します。ページのスクロールだけを気にする場合、Lix は緑色になります :)

于 2012-07-29T23:34:09.993 に答える