We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you a podcast all about Citrix Workspace, moving to the cloud, and analytics & intelligence. Episode 2 coming soon!Listen Now


creating a modal window

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..
Watch Question

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!

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Albert Van HalenAnalyst developer
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.
Michel PlungjanIT Expert
Top Expert 2009

This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.