creating a modal window

Posted on 2009-02-10
Last Modified: 2012-05-06
pls visyt this link-- 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 you know how i can implement the same kind of modal window ...i am using jsp..
Question by:mithunda5011
    LVL 17

    Accepted Solution

    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=document.getElementById('dimmer'); = '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... = '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
    You might have a look at this site :
    It has some samples which suits your needs. It requires jquery though.
    LVL 8

    Expert Comment

    LVL 75

    Expert Comment

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

    Featured Post

    What Should I Do With This Threat Intelligence?

    Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

    Join & Write a Comment

    Suggested Solutions

    This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
    Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    Learn how to set-up custom confirmation messages to users who complete your Wufoo form. Include inputs from fields in your form, webpage redirects, and more with Wufoo’s confirmation options.

    729 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

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now