Javascript Customize alert box using CSS

Last updated on May 26th, 2016 at 01:19 pm

Rating: 6.4/10 (22 votes cast)

Here i am going to create a customized alert/popup window using css and javascript. We can develop this popup window using simple div tag.
Once this div window is loaded the hyperlinks inside the webpage will get automatically deactivated or disabled. Please check our tutorial on how to Disable and enable all hyperlinks inside a div using javascript for more information.Once we cancel or close the div the hyperlinks will get automatically activated.So now you can say bye bye to the regular window alert messages. Very rare tutorial available in the internet. So we shall start with the coding part. First is the CSS code and here is how it looks like.

#mastheader

			{

				background-color:#4477BB;
				margin-top : -10px;
				color:#fff;
				height:20px;
				width:255px;
			}

  #popupbox{
  margin: 0; 
  margin-left: 40%; 
  margin-right: 40%;
  margin-top: 50px; 
  padding-top: 10px; 
  width: 20%; 
  height: 150px; 
  position: absolute; 
  background: #FBFBF0; 
  border: solid #000000 2px; 
  z-index: 9; 
  font-family: arial; 
  visibility: hidden; 
  }

Then the javascript.

function login(showhide){
    if(showhide == "show"){
        document.getElementById('popupbox').style.visibility="visible";
		disableLinksByElement(main);
    }else if(showhide == "hide"){
        document.getElementById('popupbox').style.visibility="hidden"; 		
    }
  }
function disableLinksByElement(el) {
  if (document.getElementById && document.getElementsByTagName) {
    if (typeof(el) == 'string') {
      el = document.getElementById(el);
    }
    var anchors = el.getElementsByTagName('a');
    for (var i=0, end=anchors.length; i<end; i++) {
      anchors[i].onclick = function() {
        return false;
      };
    }
  }
}
function enableLinksByElement(el) {
  if (document.getElementById && document.getElementsByTagName) {
    if (typeof(el) == 'string') {
      el = document.getElementById(el);
    }
    var anchors = el.getElementsByTagName('a');
    for (var i=0, end=anchors.length; i<end; i++) {
      anchors[i].onclick = function() {
        return true;
      };
    }
  }
}

Then comes the HTML part.

<body onload="login('hide')">
  <div id="main">
  <a href="javascript:login('show')">Pop Me</a>
  <a href="http://mistonline.in">Testing</a>
  </div>
  <div id="popupbox">
  <div id="mastheader">Javascript Alert <a href="javascript:login('hide');enableLinksByElement(main)"><img align="right" src="CloseWindow.gif"></a></div>
  Testing Div Popup
  <center><br><p><input onclick="javascript:login('hide');enableLinksByElement(main)"  type="button" value="Ok"></center> 
  </div>

DEMO

Rating: 6.4/10 (22 votes cast)