CODEWITHSUNDEEP
jquerypopup
arvanderkamp
arvanderkamp

Reputation: 181

Multiple div popups on one page

I want to use multiple div popups on one page. I used someone else's jsfiddle to make it work for one popup, but making it work for multiple popups is a whole other story.

I have adjusted the jsfiddle for the singular popup in many ways to achieve the multiple popups, but my javascript knowlegde is still not that good.

What I want is the following: I have six content blocks on a page with each a 'read more' button which will open the popup for that content block resulting in more text in a popup. So each content block has his own 'extra content' hidden in a div. When I click on the button that belongs to one of the six block the extra content will open in a popup. When I click on a button from another block that particular extra content needs to pop up.

I have come this far with my jsfiddle: http://jsfiddle.net/WGPhG/1122/

And hereby my code (so far):

function openPopup('div1') {
   $('#div1').fadeIn(200);
   $('#div2').hide;
}
function openPopup('div2') {
   $('#div2').fadeIn(200);
   $('#div1').hide;
}

function closePopup() {
    $('.popup').fadeOut(300);
}

Can someone help me out?

Thanks a lot!

Upvotes: 0

Views: 9960

Answers (2)

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

That's not a proper way to call javascript functions. If your markup will remain same all the way then you can do like this:

Markup

<button onClick="openPopup(this);">open div1</button>  <!-- pass this as a current reference of element -->

jQuery

function openPopup(elem) {  // clicked button element will be referred here
   $(elem).next().fadeIn(200);
   $(elem).next().siblings(".popup").hide();
}

OR without changing markup

function openPopup(ID) {
   $('.popup').hide();
   $("#" + ID).fadeIn(200);
}

Demo

Demo2

Docs

Upvotes: 1

JKurcik
JKurcik

Reputation: 230

Just rewrote your function declarations and fixed some syntax errors, in case you have any question about my solution, feel free to ask.

function openPopup(el) {
$('.popup').hide();
$('#' + el).fadeIn(200);   
}

function closePopup() {
$('.popup').fadeOut(300);
}

JSFiddle: http://jsfiddle.net/JKurcik/WGPhG/1124/

Upvotes: 1

Related Questions