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 https://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 https://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>