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

的的fancybox模式弹出使用一些JavaScript：如何从多个链接调用相同的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>

我如何可以调用从多个链路使用相同的弹出代码？

来源

2012-07-31 Digital Lightcraft

的用户class代替id，这样你就可以调用popupcode复式时间。

//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-31 07:48:55 bingjie2680

非常感谢！ - 我的java是最小的tbh - 我知道这将是简单的事情，我会尽快接受。 – 2012-07-31 07:59:48

使用类，而不是每个在你需要该链接的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-31 07:51:11

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

$（ '＃PeopleContainer .PeoplePopup'）

或

$（ '＃PeopleContainer'）。找到（ 'PeoplePopup'）

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

，如果它是一个小网站，你不会注意到其中的差别，但如果你已经得到了网页和相当复杂的DOM上一打以上的情况下，将开始重要。

来源

2012-07-31 08:03:32 hedgehog

嗨，感谢你 - 即时通讯使用弹出窗口编辑大表中的每个元素，你提到的情况实际上会导致什么样的问题？ – 2012-07-31 08:06:35

单独在类名上选择可能会导致性能下降。大约5年前，当我将一个定制的手风琴插件应用到100页左右div的页面时，我很难学会这门课。在速度较慢的机器上，用户会体验到可怕的“这个脚本需要很长时间才能运行，你想等待还是杀死它？”错误（我是释义，因为它依赖于浏览器）。 this： $（'。PeoplePopup'）必须搜索DOM中的每个元素，然后检查该类。 $（'＃PeopleContainer'）。find（'。PeoplePopup'）只在您分配ID为“PeopleContainer”的任何元素内搜索。 – hedgehog 2012-07-31 08:24:55

啊我看到了 - 这很有道理，所以我把第一部分作为包含DIV的名称？ – 2012-07-31 09:55:31

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

回答

相关问题