javascript - 如何从多个链接调用相同的 fancybox javascript？

Question

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>

如何从多个链接调用相同的弹出代码？

Answer 1

用户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 
})

Answer 2

虽然提供的答案是正确的，但我建议给 jQuery 一些范围，否则您正在通过整个窗口对象搜索 .PeoplePopup 的存在，例如

$('#PeopleContainer .PeoplePopup')

或者

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

虽然 xpath 选择器通常从左到右工作，但 jQuery 了解如何优化第一个示例。

如果它是一个小站点，您不会注意到差异，但如果您在页面上有十几个或更多实例和一个非常复杂的 DOM，它就会开始变得重要。

Answer 3

使用类而不是 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>