CODEWITHSUNDEEP
jquery
Hitz
Hitz

Reputation: 1071

Create a Simple modal popup

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.

Upvotes: 6

Views: 19014

Answers (5)

Eric Martin
Eric Martin

Reputation: 2841

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/

Upvotes: 4

Anthony
Anthony

Reputation: 37085

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()

Upvotes: 0

Arnis Lapsa
Arnis Lapsa

Reputation: 47677

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.

Upvotes: 5

slikts
slikts

Reputation: 8158

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.

Upvotes: 1

Ólafur Waage
Ólafur Waage

Reputation: 70031

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

Upvotes: 1

Related Questions