Web Design Basics
Tutorials
Web Products
Creating a Floating Window
Here is a functional JavaScript code which you can use for creating the floating window. It was tested successfully in IE6, Mozilla/Firefox, Opera 7.54 (Windows), Safari, Mozilla (Macintosh). Download this .js file and include it into your html page as it is shown below:
|
<html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> <title>Floating Window</title> <script src="/img_articles/10895/Drag.js"></script> </head> <body> ....... </body> </html> |
The code for the floating window is given below.
|
<div id="window" style="position:absolute; z-index:10; left:350px; top:160px; width:400px;background-color:#dde3eb; border:1px solid #464f5a; display:none;">
<div style="padding-bottom:8px; width:400px; background-color:#718191; border-bottom:1px solid #464f5a;" onMouseDown="beginDrag(this.parentNode, event);"> <div style="position:absolute; top:2px; left:5px; font-size:16px; font-weight:bold; color:#FFFFFF;">Drag me!</div> <div style="position:absolute; top:3px; left:377px; float:right;" onClick="this.parentNode.parentNode.style.display = 'none';"> <img src="How can I create a floating window on my html page.files/close_btn.gif" border="0"/> </div> </div> <br/> <div style="margin-left:20px;">your content here...</div> <div style="margin-left:30px;">your content here...</div> <div style="margin-left:40px;">your content here...</div> <br/> </div> |
If you have some skill in CSS styling and JavaScript coding you can add more attractive designs and more functionality to this window.
ABOUT THE AUTHOR
Igor Lognikov is an editor at Web Design Library, the author of many pamphlets related to the web design industry and a fully accredited card-carrying journalist since 1999.
subscribe to newsletter