Full version: jsB@nk » Browser » Popup » Always on Top Popup
URL: https://www.javascriptbank.com/always-on-top-popup.html
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.
Full version: jsB@nk » Browser » Popup » Always on Top Popup
URL: https://www.javascriptbank.com/always-on-top-popup.html
<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--><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--><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-->