Geek Answers Handbook

Create a simple modal popup

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

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

Now you can do this without using any external plugins.

If not, then I checked the plugin on jqueryui. However, in the example there are so many jquery and css files that I don’t know what to take and what to leave.

+6
jquery
source share
5 answers

Of course, it is possible without plug-ins, but it can turn out to be serious plumbing.
I used a home-made implementation of modal windows in pure javascript. Believe me, this is not a good idea. Even with jQuery (do not confuse with the jQuery user interface).

I would recommend the Eric Martin "SimpleModal" plugin (it is also on StackOverflow and at least tried to answer every question that is related to its product).
I like the API and it works like a charm.

+4
source share

Firstly, thanks for recommending SimpleModal @Arnis L.

Secondly, there is a reason why there are so many modal / lightbox modules. There are many factors to consider when creating cross-browser compatible. Thus, it is possible to do what you want without any external plugins, but for this you need to do a lot of code.

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

You can download any of the examples to get started. All you have to do is include the SimpleModal.js file on your page and add some styles, and it is ready to go.

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

+4
source share

Here is a tutorial on how to do something like this.

+1
source share

No, there are no modal window built-in functions in jQuery. You can juse jQuery flip your own modal windows, but in that case you probably would not ask this question. Just get the plugin for third-party developers.

+1
source share

You can do this without any plugins, but the hard part that you probably want to avoid is modularity.

If you want the dialog box to move when they click and drag, you must set the position of this div based on the position of the mouse, which can be quite loose. hence the jqueryui parameters.

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

Oh, and it was just said that you can get a perfect gray box with one button that will morph according to any browser user interface: alert()

0
source share

More articles:


All Articles