[Last Call] Learn how to a build a cloud-first strategyRegister Now


creating a modal window

Posted on 2009-02-10
Medium Priority
Last Modified: 2012-05-06
pls visyt this link--  http://www.wayfaring.com/ and see that there is "log in" option at the top leftmost corner.if u click on it a modal window opens up that asks your authentication data.do you know how i can implement the same kind of modal window ...i am using jsp..
Question by:mithunda5011
LVL 17

Accepted Solution

Mike_Carroll earned 500 total points
ID: 23604567
It's not actually a modal window... it just looks like one. The effect uses layers.

The dimming effect is produced by defining a CSS ID selector specifying top left position, width, height, z-index(layer) and opacity. Which basically overlays the whole display but starts hidden using "display:none;"

For example:

#dimmer {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 100;
      display: none;
      background-color: #000;
      opacity: .65;
      top: 0px;
      left: 0px;

When the link is clicked, the dimmer is activated using for example:

objDimmer.style.display = 'block';

which gives the effect of dimming the background. The foreground content is then displayed in a div on a higher level layer using a higher z-index value (for example z-index=1000). Everything in the div is handled by your JavaScript.

When you are finished, you hide the div which is your 'foreground window' and you then hide the dimmer again...

objDimmer.style.display = 'none';

It's actually a lot easier than it seems to do but it does take practice to get it right and it looks really well!

LVL 19

Assisted Solution

by:Albert Van Halen
Albert Van Halen earned 500 total points
ID: 23604634
You might have a look at this site : http://jquery.com/demo/thickbox/.
It has some samples which suits your needs. It requires jquery though.

Expert Comment

ID: 25222003
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35964443
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently used term in Object-Oriented design is "SOLID" which is a mnemonic acronym that covers five principles of OO design.  These principles do not stand alone; there is interplay among them.  And they are not laws, merely princ…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Wufoo.com provides powerful tools for surveying targeted groups, and utilizing data from completed surveys to find trends, discover areas of demand or customer expectation, and make business decisions on products or services.
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to choose which pages of your form are visible to your users based on their inputs. The page rules feature provides you with an opportunity to create if:then statements for y…
Suggested Courses

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question