How to Change the title of the JavaScript Alert

There was a requirement to change the title of the javascript alert. But unfortunatley we can't change the default title "Alert" of the alert box.

Alternatively we can do some thing like this,

We have to define our css in order to show a box on top of the screen.

When you want to show the alert box , just change the visibility of that css class.


This is How you call the OVER LAY to pop up

<p align="center"><a href='#' onclick='overlay()'>Click here to show the overlay</a></p>

view raw gistfile1.txt hosted with ❤ by GitHub

This is the style of the OVER LAY

	.close { text-decoration: underline }
	#overlay {
	visibility: hidden;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	text-align:center;
	z-index: 200;
	background-image:url(maskBG.png);
	background-color: black;
	opacity:0.9;
	}
	#overlay div {
	width:300px;
	margin: 100px auto;
	background-color: #fff;
	border:1px solid #000;
	padding:15px;
	text-align:center;
	}

view raw gistfile1.txt hosted with ❤ by GitHub

Java script function which change the Visibility to true or false

	function overlay(){
	el = document.getElementById("overlay");
	el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
	}
	function close() {
	document.getElementById("overlay").style.visibility = 'hidden';
	}

view raw gistfile1.txt hosted with ❤ by GitHub

This is the HTML for the OVERLAY

	<div id="overlay">
	<div>
	<p>Content you want the user to see goes here.</p>
	<a href="javascript:close()">Close</a>
	</div>
	</div>

view raw gistfile1.txt hosted with ❤ by GitHub

By using this Mrthod you can have different pop ups as you want