Previous | Home | Next |
How to Create a Popup using JavaScript
Step 1. Written below code in your application.
HTML Code:
<html> <script language="javascript"> x = 20; y = 70; function set_visible(obj) { obj = document.getElementById(obj); obj.style.visibility = (obj.style.visibility == 'visible') ? 'hidden' : 'visible'; } function place_It(obj) { obj = document.getElementById(obj); if (document .documentElement) { theLeft = document.documentElement.scrollLeft; theTop = document.documentElement.scrollTop; } else if (document.body) { theLeft = document.body.scrollLeft; theTop = document.body.scrollTop; } theLeft += x; theTop += y; obj.style.left = theLeft + 'px' ; obj.style.top = theTop + 'px' ; setTimeout("place_It('layer1')" ,500); } window.onscroll = setTimeout ("place_It('layer1')" ,500); </script> <body> <div id="layer1"> <span id="close" ><a href="javascript:set_visible('layer1')" style= "text-decoration: none"> <strong>Close</strong></a></span> <p>Java Script was developed by the Brendan Eich of Netscape. Initially java script was called Live script. Live script was the official name of java script when it was released in beta version in Netscape Navigator 2. 0 in 1995. But it was renamed by joint procession of Sun Microsystems and Netscape .</p> </div> <input type= "button" value="Open popup" onclick= "set_visible('layer1')"> </body> </html>
Style Code:
<style type="text/css"> #layer1 { position: absolute; visibility: hidden; width: 300px; height: 300px; left: 20px; top: 300px; background-color: #ccc; border: 2px solid #000; padding: 10px; } #close { float: right; }
Step 2. Run the Application.

Previous | Home | Next |