how to create overlay form in jsp

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • arjun12345
    New Member
    • Oct 2013
    • 4

    how to create overlay form in jsp

    I have to create Jsp with one link. when we click the lick it should display overlay registration form with two buttons. one to submit form onter to go back main jsp.
    Code:
    <html> <body>
    Product : asc
    discription : xxxx
    <a href="http://bytes.com/">register</a> </body>
    overlay form should look something like this
    Code:
    <form>
    Name :<input name="uname" type="text">
    Pass word :<input name="pword" type="text">
    Name :<input value="ok" type="submit"> </form>
    one solution(with button but i need with anchor tag)
    Code:
    <html>
     <head>
     <META HTTP-EQUIV="EXPIRES" CONTENT="-1" />
     <script type="text/javascript">
    
                function showFrontLayer() {
                    document.getElementById('bg_mask').style.visibility='visible';
                    document.getElementById('frontlayer').style.visibility='visible';
                }
                function hideFrontLayer() {
                    document.getElementById('bg_mask').style.visibility='hidden';
                    document.getElementById('frontlayer').style.visibility='hidden';
                }
            </script>
     <style type="text/css">
     
            #bg_mask {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
                margin-top: 0px;
                background : url("img_dot_white.jpg") center;
                z-index: 0;
                visibility: hidden;
            } 
     
            #frontlayer {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background-color: orange;
                visibility: hidden;
                border: 1px solid black;
                z-index: 1;
            } 
     
     
            </style>
     </head>
     <body>
     <form action="http://bytes.com/test.html">
     <div id="baselayer">
     
            Product -one
    		company - two
            <input type="button" value="Show front layer" onclick="showFrontLayer();"/> Register<br/><br/>
     as
     <div id="bg_mask"> <div id="frontlayer"><br/><br/> <form>
                   Id<input type="text" name="id"><br/> <input type="submit" value="ok"><br/>
     </form>
     <input type="button" value="Hide front layer" onclick="hideFrontLayer();"/>
     </div> </div> </div> </form> </body> </html> </html>
    Last edited by Frinavale; Oct 25 '13, 06:49 PM. Reason: Please post code in code tags.
  • chaarmann
    Recognized Expert Contributor
    • Nov 2007
    • 785

    #2
    instead of
    Code:
    <input type="button" value="Show front layer" onclick="showFrontLayer();"/>
    in your code, try using
    Code:
    <a onclick="showFrontLayer()" href="javascript:void(0);">

    Comment

    • arjun12345
      New Member
      • Oct 2013
      • 4

      #3
      Hi Chaarmann
      Thanks for your replly. can you tell how to display external jsp as overlay and pros and cons

      Comment

      • chaarmann
        Recognized Expert Contributor
        • Nov 2007
        • 785

        #4
        To display external webpage (not only jspa) as overlay, display it inside an IFrame in your overlay above.

        An overlay has the advantage that it cannot be blocked by popup-blockers. But some people (like me) are very annoyed of advertisements in overlays, especially if you can not close them the standard way.

        Comment

        Working...