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'）。找到（ '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>

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

3 个答案: