Question

我正在创建一个带有徽标的页面，并使用简单的模式使弹出窗口显示有关所点击徽标的更多信息。

我正确地遵循了这个问题/答案，并且能够使2个第一个徽标起作用; jQuery SimpleModal: two different modal contents in the same page

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

页面更清楚，而不是有30个JS函数..

非常感谢！

Answer 1

您可以尝试这样做：

<强> Demo Here

<强> 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属性来确定每次显示哪一个。这样，您不需要每个徽标的模态，只需一个模式根据点击的链接加载信息。

祝你好运！

jQuery SimpleModal：同一页面中的X个不同的模态内容

1 个答案: