Loading...

Creating a Floating Window

Igor
in
JavaScript

Creating a Floating WindowHere 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

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.

Copyright © . All Rights Reserved