« »

This JavaScript opens a floating layer popup. This technique allows the user to work in the main window while still being able to view the popup. The popup window will hover at the same spot where it opens, even if the user scrolls down the page.

Label: Always on Top Popup

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
HTML
Print

Copy All x2

<style>
td.top {
  background-color: #000080;
  text-align: right;
}

td.bottom {
  background-color: #ffe38c;
  padding: 15px;
}
</style>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<script>
/*
	Created by: Sandeep Gangadharan 
	Web Site: http://www.sivamdesign.com/home/
*/
var y1 = 20;   // change the # on the left to adjuct the Y co-ordinate
(document.getElementById) ? dom = true : dom = false;

function hideIt() {
  if (dom) {document.getElementById("layer1").style.visibility='hidden';}
  if (document.layers) {document.layers["layer1"].visibility='hide';} }

function showIt() {
  if (dom) {document.getElementById("layer1").style.visibility='visible';}
  if (document.layers) {document.layers["layer1"].visibility='show';} }

function placeIt() {
  if (dom && !document.all) {document.getElementById("layer1").style.top = window.pageYOffset + (window.innerHeight - (window.innerHeight-y1))}
  if (document.layers) {document.layers["layer1"].top = window.pageYOffset + (window.innerHeight - (window.innerHeight-y1))}
  if (document.all) {document.all["layer1"].style.top = document.body.scrollTop + (document.body.clientHeight - (document.body.clientHeight-y1));}
  window.setTimeout("placeIt()", 10); }

window.onload=placeIt;
onResize="window.location.href = window.location.href"

</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<div id="layer1" style="position:absolute; left:20px; width:410px; height:10px; visibility:hidden;">
<table border="0" cellspacing="0" cellpadding="3">
 <tr>
  <td class="top">
       <a href="javascript:hideIt()" style="text-decoration: none"><font color="#ffffff"><b>X</b></font></a>
  </td>
 </tr>
 <tr>

  <td class="bottom">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
    ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci.
    <br><br>
    [<em>You can close the layer by clicking the <strong>X</strong> at the top right of this layer.</em>]
  </td>
 </tr>
</table>
</font>

</div>

<form>
  <input type="button" value="Open popup" onClick="showIt()">
</form>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->