Create a Simple modal popup

Question

I have a very simple requirement. I have two div. Div1 with a Link and Div2 contains some text.

On the click of the link in Div1, I want to display Div2 as a simple modal popup with a grey background and a close button.

Now is it possible to do so without using any external plugins.

If not, then i checked a plugin on jqueryui. However there are so many jquery and css files referenced in teh example, that I do not know what to take and what to leave.

Answer 1

It surely IS possible without plugins, but that might turn out as serious plumbing.
I've used 'home-made' modal windows implementation in pure javascript myself.
Trust me - it's not a good idea. Even with jQuery (do not confuse with jQuery UI).

I would recommend you 'SimpleModal' plugin by Eric Martin (he is on StackOverflow too and has at least tried to answer every question that's related with his product).
I like it's API and it works like a charm.

Answer 2

First, thanks for the SimpleModal recommendation @Arnis L.

Second, there is a reason why so many modal/lightbox plugins exist. There are a lot of factors to consider to create something that is cross-browser compatible. So, doing what you want w/o any external plugins is possible, but to do it right, it is going to take a lot of code.

So, you asked for help to create a simple modal...why not try SimpleModal ;)

You can download any of the examples to get you started. All you would need to do is include the SimpleModal .js file to your page and add few styles and it is ready to go.

http://www.ericmmartin.com/projects/simplemodal-demos/