JavaScript

How to insert an unstoppable popup in your web page?

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!

1 comment to How to insert an unstoppable popup in your web page?

Leave a Reply

  

  

  

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>