Question

I’m trying to create a clean jquery pop-up with different functionalities. I dont want to use a plug-in (and I want to learn lol). Here is what I want.

1. center it in the screen (that’s done and working)
2. close that pop-up whenever the user click outside of it. (We need to be able to click INSIDE the pop-up thought)
3. I want the html content of the pop-up to change depending on the link you clicked. ( ex. I want a list in my pop-up for link 1, and a form for link 2) — (No idea at all how to do that)

Now here’s what I have: http://jsfiddle.net/RYwsy/2/

I did some research, but there are SO many different techniques out there, that im completely lost. And I want the cleanest/fastest way possible yo do that with jQuery.

Im still searching and trying things, but I would like some help too.

Thanks!

Answer 1

Wow, this was more tricky than expected… Long story short, I edited your fiddle: Here and it works now.

Edit: new fiddle that uses the event propagation more neatly: http://jsfiddle.net/RYwsy/23/

Point 3 was pretty straightforward. If you want the content to come from somewhere on the page, find it based on some property of the link clicked, or the context it’s in (like looking at its siblings or something). In my example i just added an id attribute to the link, and used that to identify a hidden div that contains the content and insert it in the popup.

Point 2 was more tricky. At first I just attached a click handler to everything except the popup, and hid the popup in there. This didn’t work, because the click events from the popup propagated up through the dom, and eventually reached some element the hid the popup. I then added a check on whether we are clicking the popup, and if we are, stop the propagation in there.

Whether this is the cleanest solution is probably highly debatable, but it is fairly clean and if nothing else is a good example of why you need to understand event propagation in javascript 🙂