2

fancybox モーダル ポップアップは、JavaScript を少し使用します。

$("#PeoplePopup").fancybox({
'autoScale'         : false,
'padding'           : 0,
'width'             : 800,
'height'            : 600,
'transitionIn'      : 'elastic',
'transitionOut'     : 'elastic',
'type'              : 'iframe',
'overlayColor'      : '#000',
'overlayOpacity'    : 0.5
});

リンクがクリックされたときに起動されます。

<a href = "peoplesearch.aspx"  class="SmallWhite" 
      id="PeoplePopup">Search for Internal Contact details &gt; </a>

複数のリンクから同じポップアップ コードを呼び出すにはどうすればよいですか?

4

3 に答える 3

5

classの代わりにユーザーidなので、ポップアップコードを複数回呼び出すことができます。

//html
<a href = "peoplesearch.aspx"  class="SmallWhite PeoplePopup">
         Search for Internal Contact details </a>

//other links
<a href = "peoplesearch2.aspx"  class="PeoplePopup">...</a>
<a href = "peoplesearch3.aspx"  class="PeoplePopup">...</a>

//this jquery code will apply to the three links above
$(".PeoplePopup").fancybox({
    //the same code here 
})
于 2012-07-31T07:48:55.950 に答える
1

提供された回答は正しいですが、jQuery にある程度のスコープを与えることをお勧めします。

$('#PeopleContainer .PeoplePopup')

また

$('#PeopleContainer').find('.PeoplePopup')

通常、xpath セレクターは左から右に機能しますが、jQuery は最初の例を最適化する方法を理解しています。

小さなサイトの場合、違いはわかりませんが、ページに多数のインスタンスがあり、非常に複雑な DOM を使用している場合は、違いが気になり始めます。

于 2012-07-31T08:03:32.690 に答える
0

ID の代わりにクラスを使用する

$(".PeoplePopup").fancybox({
'autoScale'         : false,
'padding'           : 0,
'width'             : 800,
'height'            : 600,
'transitionIn'      : 'elastic',
'transitionOut'     : 'elastic',
'type'              : 'iframe',
'overlayColor'      : '#000',
'overlayOpacity'    : 0.5
});

次に、これが必要な各リンクで、PeoplePopup クラスを追加します -

<a href = "peoplesearch.aspx"  class="SmallWhite PeoplePopup">Search for Internal Contact details &gt; </a>

<a href = "peoplesearch.aspx"  class="SmallWhite PeoplePopup">Internal Contact details &gt; </a>
于 2012-07-31T07:51:11.210 に答える