Last updated on February 11th, 2022 at 02:17 pm
Javascript custom alert / pop up box
I am going to create a custom alert/popup window using css and javascript. We can develop this popup window with the help of a 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 close the DIV all hyperlinks will get automatically activated.So now you can bid adios 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 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;
};
}
}
}
And finally the HTML code to tie the CSS and Javascript we described above
<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>