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

Here's a tutorial on how to do something like this.

Answer 3

No, there is no built in modal window functionality in jQuery. You can juse jQuery to roll your own modal windows, but in that case you probably wouldn't be asking this question. Just get a third party plugin.

Answer 4

You could do it without any plugins, but the tricky part that you will probably want to avoid is the modularity.

If you want the dialog box to move when they click and drag, you have to set the position of that div based on the mouse position, which can get pretty jerky quick. hence the jqueryui options.

I agree, the CSS is enough to make you want to choke sometimes.

Oh, and just so it's been said, you can get a perfect grey box with one button that will morph to fit any browser's UI: alert()

Answer 5

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/