Flickering pop-up banner using JavaScript

Author: satz | Date: April 30, 2009

Flickering pop-up banner using JavaScript

Introduction:

This article is on “how to make a pop-up with a flickering effect using JavaScript”. This effect makes the banner more attractive to get the visitor’s attention. In this tutorial, we will learn how to make a flickering border to the banner.

Features:

Easy to implement
Customizable
Cross browser compatible

Code:


Copy & Paste the following code into a new html page

<html>
<head>
<script type="text/javascript">
/*
This script was developed by Satheesh and published on http://www.tutorials2learn.com
You are free to use it. You may modify it or customize it.
If you use it Please leave this comment without any change.
visit http://www.tutorials2learn.com

*/
var Loop_instance =0;

function alternateBorderColor(maxLoop)
{
Loop_instance ++;
var popUpObj = document.getElementById('popUpLayer');

    if(Loop_instance % 2 == 0){

     popUpObj.style.border = "5px solid #000000";
      }else{
        popUpObj.style.border = "5px solid #FFFFFF";

        }
    if(Loop_instance<maxLoop){
    ShowPopUp(maxLoop);
    }
}

function ShowPopUp(flickNum){

var popUpObj = document.getElementById('popUpLayer');
popUpObj.style.display="block";
flicktimes =flickNum;

setTimeout('alternateBorderColor(flicktimes);',50)
}
function ClosePopUp(){
var popUpObj = document.getElementById('popUpLayer');
popUpObj.style.display="none";

}

</script>
</head>

<body bgcolor="#CCCCCC">

<div id="popUpLayer" style="width:457px; height:310px;position:absolute; left:250px; top:210px; z-index:1000; display:none; background:#FFFF00; " onMouseOver="this.style.border = '5px solid #FFFFFF';" onMouseOut="this.style.border = '5px solid #000000';">
<div style="text-align:right; "><b><a href="#" onClick="ClosePopUp();" style="font-family:verdana;font-size:14px;color:#000000; text-decoration:none;"> CLOSE X </a></b></div>
<div><img src="http://www.lipsum.com/images/white_300x250.gif" width="457" height="290"></div>

</div>

 <script type="text/javascript">
//specify the flickering Number instead of "30" below.
 ShowPopUp(30);
 </script>
</body>
</html>