Javascript Customize alert box using CSS

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

Javascript Alert

Testing Div Popup

[/html]

DEMO

Incoming search terms:

• stylish alert box using javascript (21)
• stylish alert box (8)
• stylish alert box using jquery (7)
• stylish css popup window (5)
• stylish popup window in javascript (4)
• javascript:login_popup(); return false; (4)
• stylish popup window using javascript (4)
• the best alert in jquery (2)
• javascript alert message box custom (2)
• how to design stylish alert box in javascript (2)
• javascript alert customize (2)
• customize javascript alert (2)
• custom javascript alert (2)
• css alert popup (2)
• customize javascript alert box (2)
• customize javascript alert box css (2)
• java popup using div (2)
• stylish login popup box java script (2)
• customized alert popup alert box in js (2)
• stylish alert box using css (2)
• stylish dialog box in jquery for onclick button (2)
• custom alert in jsp (1)
• custom alert popup javascript (1)
• custom alert with css html jquery (1)
• yhs-looksafe_ds_trans (1)
• custom window alert box cpoding (1)
• custom alert html (1)
• custom alert css3 php (1)
• beautiful alert in jsp (1)
• best css alert (1)
• css alert box popup (1)
• css alert popup design (1)
• css code for stylish alert box (1)
• css for javascript alert (1)
• css popup onClick (1)
• css3 popup alert (1)
• cusstom alertbox using div tag (1)
• Custalert in jsp (1)
• custom alert box (1)
• custom alert box in jsp (1)