jQuery SimpleModal: X различных модальных содержимого на той же странице

Question

Я делаю страницу с логотипами и используя простой способ, чтобы всплывающее окно появилось, чтобы получить больше информации о логотипе, нажатом.

Я правильно выполнил этот вопрос/ответ и смог сделать 2 первых логотипа; jQuery SimpleModal: two different modal contents in the same page

Но прежде чем идти дальше, я хотел бы знать, если есть способ, чтобы избежать необходимости добавить новую функцию для каждого нового окна (# основного покадрово .basic, # базовых модального .basic2 и т.д. ..). Так как у меня около ~ 30 логотипов (и больше), возможно ли сделать ONE для всех вместо одного для каждого?

Было бы более ясно страницы вместо того, 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 использует атрибут target-data, чтобы определить, какой из них показывать в каждый момент. Таким образом, вам не нужен модальный для каждого логотипа, только один модальный погрузка информации, основанной на том, какая ссылка нажата.

Удачи!