0

我正在制作一个带有徽标的页面，并使用简单的模式使弹出窗口出现以获取有关单击的徽标的更多信息。

我正确地遵循了这个问题/答案，并且能够使前 2 个徽标起作用； jQuery SimpleModal：同一页面中的两个不同的模态内容

但在继续之前，我想知道是否有办法避免为每个新窗口添加新功能（#basic-modal .basic、#basic-modal .basic2 等...）。由于我有大约 30 个徽标（还有更多徽标），是否可以为所有人制作一个功能而不是每个功能一个？

页面会更清晰，而不是拥有 30 个 JS 功能..

非常感谢！

4

1 回答 1

0

你可以尝试做这样的事情：

在这里演示

HTML

<a href="#" class="infoLink" data-target="div1">Logo 1</a>
<a href="#" class="infoLink" data-target="div2">Logo 2</a>
<a href="#" class="infoLink" data-target="div3">Logo 3</a>
<a href="#" class="infoLink" data-target="div4">Logo 4</a>
<a href="#" class="infoLink" data-target="div5">Logo 5</a>

<div id="div1" class="infoDiv">Info About Logo 1 goes here...</div>
<div id="div2" class="infoDiv">Info About Logo 2 goes here...</div>
<div id="div3" class="infoDiv">Info About Logo 3 goes here...</div>
<div id="div4" class="infoDiv">Info About Logo 4 goes here...</div>
<div id="div5" class="infoDiv">Info About Logo 5 goes here...</div>

JS

$('.infoLink').bind('click', function(e){
    var $target = $('#'+$(this).data('target'));

    $target.modal({
        overlayClose:true
    });
});​

基本上每个徽标框都隐藏在页面上，jQuery 使用 data-target 属性来确定每次显示哪一个。这样您就不需要为每个徽标使用模态，只需一个模态加载基于单击的链接的信息。

祝你好运！

于 2012-05-31T22:00:50.237 回答