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

x

creating a modal window

Medium Priority
293 Views
Last Modified: 2012-05-06
hi,
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..
thanks
Comment
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;
      filter:progid:DXImageTransform.Microsoft.BasicImage(opacity=.65);
      top: 0px;
      left: 0px;
}


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

objDimmer=document.getElementById('dimmer');
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
CERTIFIED EXPERT
Commented:
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
CERTIFIED EXPERT
Top Expert 2009

Commented:
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.

OR

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.