How to Make a Javascript Popup Box on First Site Visit?

Question

I've attempted to search for this on Google, but I have no clue what it's actually called. It's basically a box that fades onto the screen on your first visit to the site (using cookies), and has an X in the top right corner that allows users to close it. Can anyone tell me what this is actually called, or show me how to make this? Thanks.

Answer 1

You can check the existance of the cookie and set a cookie if it is not already there using jquery.

  if( $.cookie("visited")!='visited'){
       $.cookie("visited", "visited"); 
       $('#dialogDivId').dialog();
  }

And if the

<div id="dialogDivId">

It's your first visit...
</div>

Answer 2

Using JavaScript you need some functions to get and set the cookie.

Getting the Cookie information

function getCookie(c_name) { var i,x,y,ARRcookies=document.cookie.split(";"); for (i=0;i<ARRcookies.length;i++) { x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("=")); y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1); x=x.replace(/^\\s+|\\s+$/g,""); if (x==c_name) { return unescape(y); } } }

Setting the Cookie information

function setCookie(c_name,value,exdays) { var exdate=new Date(); exdate.setDate(exdate.getDate() + exdays); var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()); document.cookie=c_name + "=" + c_value; }

Now check the cookie and display the popup box

function checkCookie() { var popup=getCookie("popup"); if (popup==null && popup=="") { document.getElementById("popupDivID").style.display="block"; }

HTML part

<div id="popupDivID" style="display:none;position:absolute;top:20%;left:15%;background-color:#fff;width:500px;height:300px;">POPUP Content and Close Icon</div>

You have to call the checkCookie() function on body onload. If you need jQuery solution please follow @Jayantha's solution.