CODEWITHSUNDEEP
javascripthtmlcssajaxpopup
Boris
Boris

Reputation: 10244

How to display modal dialog within the web page?

So, I am developing the first serious web site. I want to implement the following scenario, but I need guidance and advice. There is a button <input type="submit"> on my web page. When the user clicks it, I want it to open some HTML content which will be shown on top of all page content (and positioned centrally, but I don't care about that detail at the moment). It should act very similar to the way the photos are viewed on Facebook. When the user clicks the photo thumbnail, the photo opens on top of and across all page content.

Now, I've implemented this already, but I think that my approach is not recommendable, as it looks a bit clumsy to me, especially when I think about the maintenance of the site:
I added a <div> as the last element to the <body>; it is positioned absolutely and collapsed and serves as a container. When the button is clicked, that <div> is filled with the content and the state is changed from collapsed to visible.

I would very much appreciate if someone would like to share the standard methods used to achieve this effect and opinions . I am guessing that AJAX and jQuery should be used heavily for this (I used pure JavaScript in my design described previously). I am looking for some code samples and resources. Thank you so much.

Upvotes: 0

Views: 2723

Answers (4)

Mizuho
Mizuho

Reputation: 90

I believe what you're looking for might be Lightbox-like? It could give you some ideas at the very least.

Edit: Or this one which supports text and such.

Upvotes: 0

Will
Will

Reputation: 20235

You can position: absolute; the popup box and set it where on the screen you want it. Then use z-index to put it over the content.

Here is a demo: http://jsfiddle.net/e6BEu/

Upvotes: 0

Joseph
Joseph

Reputation: 119847

What you are looking for is a modal dialog and not a pop-up. Pop-ups are new windows, while modals are HTML elements that block the page behind it for emphasis on forward content.

One way is to have a <div> appended to the body, usually to the end of the body and have it positioned absolute. That div will have top, bottom, left and right zero to stretch to fit the viewport. Within that div is another div that is also positioned absolute, relative to the parent, viewport-fitting div. Positioning is up to you, but usually it's centered using a formula:

center = (total length - modal length)/2

Content is up to you. You can have the content already loaded and hidden in the DOM which you can just display later. Or load the content via AJAX if you wish.

jQuery already has a modal plugin in the jQueryUI suite which you can use that packs a lot of methods to add and customize.

Upvotes: 2

Johannes Klau&#223;
Johannes Klau&#223;

Reputation: 11020

There are a lot of approaches out there. You could use jQuery UI (http://jqueryui.com). But I like the approach Twitter's Bootstrap is taking: http://twitter.github.com/bootstrap/javascript.html#modals

This is a very clean setup and you can load the content via AJAX with a little selfwritten function. You don't need to write everything yourself because there are plenty of plugins out there. And the bootstrap modal plugin is standalone so you can just use this one.

I like to use it and generate the content div with an AJAX request.

Upvotes: 0

Related Questions