creating a modal window

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
mithunda5011Asked:
Who is Participating?
 
Mike_CarrollCommented:
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!





0
 
Albert Van HalenAnalyst developerCommented:
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.
0
 
n_sachin1Commented:
0
 
Michel PlungjanIT ExpertCommented:
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.