0

I am making a page with logos and using simple modal to make a popup appear to get more information about the logo clicked.

I followed this question/answer correctly and was able to make the 2 first logos work; jQuery SimpleModal: two different modal contents in the same page

But before going further, I would like to know if there is a way to avoid having to add a new function for each new windows (#basic-modal .basic, #basic-modal .basic2, etc...). Since I have about ~30 logos (and more coming), is it possible to make ONE function for all instead of one for each?

It would be more clear for the page instead of having 30 JS function ..

Thanks a lot!

Community
  • 1
  • 1
Jauny
  • 950
  • 1
  • 8
  • 19
  • Are the modals appearing at the same time? Why not use one modal and load the different logos into it? – dSquared May 31 '12 at 19:58
  • no the modal are not appearing at the same time. I have a wall of logos, and when you clic on one, a modalpopup appears with more info like website, adress etc. – Jauny May 31 '12 at 21:35

1 Answers1

0

You can try doing something like this:

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
    });
});​

Essentially each logo box is hidden on the page and jQuery uses the data-target attribute to determine which one to show at each time. That way you don't need a modal for each logo, just one modal loading the information based on which link is clicked.

Good Luck!

dSquared
  • 9,725
  • 5
  • 38
  • 54
  • Thanks for the answer, I have tried your code, but it doesn't seem to work... clicking on the link doesn't show the pop-up... The example you gave doesn't show any pop-up either :( – Jauny May 31 '12 at 22:35
  • @Jauny It actually does; the modal just isn't styled. Open your console and clock on one of the link in the bottom right window. You'll see the div pop-up, click anywhere to close it to click on another link. – dSquared May 31 '12 at 22:40
  • OMG sorry i'm a noob didn't realize it wouldn't appear without some styling :) thanks a lot ! – Jauny May 31 '12 at 22:55
  • @Jauny No problem; I hope it helps. – dSquared May 31 '12 at 23:29