Here is a draggable "Pop up" created with layers.
Pop up blockers have no effect on this code.
And you can drag the Pop up around on the page.
Send this page to a friend.
X
Friends Name:
Friend's Email:
Your Name:
Your Email:
Subject: "Check out this site."
Message:
To show the Pop up
(a working "send to a friend" form):
Click Here
Here is the code:
Put this in between the <head>and </head> tags:
<script language="JavaScript1.2"> isIE=document.all; isNN=!document.all&&document.getElementById; isN4=document.layers; DoIt=false; function ddInit(e){ TWD=isIE ? "BODY" : "HTML"; TWD1=isIE ? document.all.theLayer : document.getElementById("theLayer"); TWD2=isIE ? event.srcElement : e.target; while (TWD2.id!="titleBar"&&TWD2.tagName!=TWD){ TWD2=isIE ? TWD2.parentElement : TWD2.parentNode; } if (TWD2.id=="titleBar"){ offsetx=isIE ? event.clientX : e.clientX; offsety=isIE ? event.clientY : e.clientY; nowX=parseInt(TWD1.style.left); nowY=parseInt(TWD1.style.top); ddEnabled=true; document.onmousemove=dd; } } function dd(e){ if (!ddEnabled) return; TWD1.style.left=isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx; TWD1.style.top=isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety; return false; } function ddN4(TWD3){ if (!isN4) return; N4=eval(TWD3); N4.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP); N4.onmousedown=function(e){ N4.captureEvents(Event.MOUSEMOVE); N4x=e.x; N4y=e.y; } N4.onmousemove=function(e){ if (DoIt){ N4.moveBy(e.x-N4x,e.y-N4y); return false; } } N4.onmouseup=function(){ N4.releaseEvents(Event.MOUSEMOVE); } } function hideMe(){ if (isIE||isNN) TWD1.style.visibility="hidden"; else if (isN4) document.theLayer.visibility="hide"; } function showMe(){ if (isIE||isNN) TWD1.style.visibility="visible"; else if (isN4) document.theLayer.visibility="show"; } document.onmousedown=ddInit; document.onmouseup=Function("ddEnabled=false"); </script>
Put this in the body:
<!-- BEGIN FLOATING LAYER CODE //--> <div id="theLayer" style="position:absolute;width:250px;left:9px;top:135px;visibility:hidden"> <table border="0" width="250" bgcolor="#990000" cellspacing="0" cellpadding="5"> <tr> <td width="100%"> <table border="0" width="100%" cellspacing="0" cellpadding="0" height="36"> <tr> <td id="titleBar" style="cursor:move" width="100%"> <ilayer width="100%" onSelectStart="return false"> <layer width="100%" onMouseover="DoIt=true;if (isN4) ddN4(theLayer)" onMouseout="DoIt=false"> <font face="Arial" color="#FFFFFF">Layer Title Goes Here</font> </layer> </ilayer> </td> <td style="cursor:hand" valign="top"> <a href="#" onClick="hideMe();return false"><font color=#ffffff size=2 face=arial style="text-decoration:none">X</font></a> </td> </tr> <tr> <td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2"> <!-- PLACE YOUR CONTENT HERE //--> Your content goes here.<br> You can use any html code or text.<br> including <a href="http://www.texaswebdevelopers.com/"target="_blank">hyperlinks</a>. <!-- END OF CONTENT AREA //--> </td> </tr> </table> </td> </tr> </table> </div> <!-- END FLOATING LAYER CODE //-->
Hyperlinks to show/hide layer:
To show the layer: <a href="javascript:showMe();">show</a> To hide the layer: <a href="javascript:hideMe();">hide</a>
If you want the "popup" to be visible on page load then simply change the "visibility"
attribute in the layer code from "hidden" to "visible".
