How does an unstoppable popup work?
An unstoppable popup is in fact a <div> </ div> tag containing HTML code that, when interpreted by the web browser, looks like a window that floats over the normal web page. Please see this example http://www.1stoppopup.com/UnstoppableExemple.htm
If you look at the source code of the above mentioned page (http://www.1stoppopup.com/UnstoppableExemple.htm), you will notice that one part of the code is in JavaScript and the second part is in html. The JavaScript part controls the popup box while the html part contains the message.
How to proceed to put this unstoppable popup on your web page:
1. Insert the following code in the <head> part of your web page:
<script>
/******************************************
* Popup Box- By Dominique
* Visit <a href=”http://www.1stoppopup.com/Unstoppable-popup.htm” target=”_blank”>
******************************************/
var nscape4=document.layers
var iexplorer4=document.all
var netscape6=document.getElementById&&!document.all
//drag drop function for nscape 4////
var poigneededrag=0
var nsaxex
var nsaxey
var nstemporaire
function draguens(nom){
if (!nscape4)
return
temporaire=eval(nom)
temporaire.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temporaire.onmousedown=vans
temporaire.onmousemove=dragns
temporaire.onmouseup=stopns
}
function vans(e){
temporaire.captureEvents(Event.MOUSEMOVE)
nsaxex=e.x
nsaxey=e.y
}
function dragns(e){
if (poigneededrag==1){
temporaire.moveBy(e.x-nsaxex,e.y-nsaxey)
return false
}
}
function stopns(){
temporaire.releaseEvents(Event.MOUSEMOVE)
}
//drag drop function for iexplorer4+ and NS6////
/////////////////////////////////
function deplace(e){
if (iexplorer4&&approuvedrag){
crossobj.style.left=temporairex+event.clientX-offsetx
crossobj.style.top=temporairey+event.clientY-offsety
return false
}
else if (netscape6&&approuvedrag){
crossobj.style.left=temporairex+e.clientX-offsetx+”px”
crossobj.style.top=temporairey+e.clientY-offsety+”px”
return false
}
}
function initializedrag(e){
crossobj=netscape6? document.getElementById(“montreimage”) : document.all.montreimage
var firedobj=netscape6? e.target : event.srcElement
var topelement=netscape6? “html” : document.compatMode && document.compatMode!=”BackCompat”? “documentElement” : “body”
while (firedobj.tagName!=topelement.toUpperCase() && firedobj.id!=”dragbar”){
firedobj=netscape6? firedobj.parentNode : firedobj.parentElement
}
if (firedobj.id==”dragbar”){
offsetx=iexplorer4? event.clientX : e.clientX
offsety=iexplorer4? event.clientY : e.clientY
temporairex=parseInt(crossobj.style.left)
temporairey=parseInt(crossobj.style.top)
approuvedrag=true
document.onmousemove=deplace
}
}
document.onmouseup=new Function(“approuvedrag=false”)
////drag drop functions end here//////
function chacheboite(){
crossobj=netscape6? document.getElementById(“montreimage”) : document.all.montreimage
if (iexplorer4||netscape6)
crossobj.style.visibility=”hidden”
else if (nscape4)
document.montreimage.visibility=”hide”
}
function montreboite(){
crossobj=netscape6? document.getElementById(“montreimage”) : document.all.montreimage
if (iexplorer4||netscape6)
crossobj.style.visibility=”visible”
else if (nscape4)
document.montreimage.visibility=”show”
}
</script>
2. Put the following in the <body> part of your webpage:
<div style=”position:absolute;width:250px;left:250px;top:250px”>
<table border=”0″ width=”250″ bgcolor=”#000080″ cellspacing=”0″ cellpadding=”2″>
<tr>
<td width=”100%”><table border=”0″ width=”100%” cellspacing=”0″ cellpadding=”0″
height=”36px”>
<tr>
<td style=”cursor:hand; cursor:pointer” width=”100%”><ilayer width=”100%”><layer width=”100%” top=”3″><font face=”Verdana”
color=”#FFFFFF”><strong><small>Window Title</small></strong></font></layer></ilayer></td>
<td style=”cursor:hand”><a href=”#”><img src=”http://www.1stoppopup.com/WinClose.gif” width=”16px”
height=”14px” border=0></a></td>
</tr>
<tr>
<td width=”100%” bgcolor=”#FFFFFF” style=”padding:4px” colspan=”2″>
<!– PUT YOUR CONTENT BETWEEN HERE –>
Testing 1 2 3
<!– END YOUR CONTENT HERE –>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
3. All that is left for you to do is to insert your content where appropriate. i.e. between
<!– PUT YOUR CONTENT BETWEEN HERE –>
and
<!– END YOUR CONTENT HERE –>
4. Possible modifications:
* Change icon (X) closed:
src = http://www.1stoppopup.com/WinClose.gif
* Modify the text in the header of the window:
<small>Window Title</small>
* Change the outline color and width of the window:
<table border=”0″ width=”250” cellspacing=”0″ cellpadding=”2″> bgcolor=”#000080”
* Change the background color:
<Font face = “Verdana”
color = “# FFFFFF“>
* Insert your contents in this window:
<! – PUT YOUR CONTENT BETWEEN HERE ->
Testing 1 2 3
<! – END YOUR CONTENT HERE ->
Note: You can insert scripts, texts, images, … between these two tags.
You can fin an unstoppable popup creator here:
http://www.1stoppopup.com/Unstoppable-popup.htm
Enjoy!
Thankd for sharing, nice script. Great for webmasters.