how to change the style of alert box

When you start up or just join a project based on webapplications, the design of interface is maybe good. Otherwise this should be changed. In order to Web 2.0 applications you will work with dynamic contents, many effects and other stuff. All these things are fine, but no one thought about to style up the JavaScript alert and confirm boxes.
Here is the they way,.. completely dynamic, JS and CSS driven

Create simple html file

<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="jsConfirmStyle.js"></script>
<script type="text/javascript">

function confirmation() {
	var answer = confirm("Wanna visit google?")
	if (answer){
		window.location = "";

<style type="text/css">
body {
	background-color: white;
	font-family: sans-serif;
#jsconfirm {
	border-color: #c0c0c0;
	border-width: 2px 4px 4px 2px;
	left: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	top: -1000px;
	z-index: 100;

#jsconfirm table {
	background-color: #fff;
	border: 2px groove #c0c0c0;
	height: 150px;
	width: 300px;

#jsconfirmtitle {
	background-color: #B0B0B0;
	font-weight: bold;
	height: 20px;
	text-align: center;

#jsconfirmbuttons {
	height: 50px;
	text-align: center;

#jsconfirmbuttons input {
	background-color: #E9E9CF;
	color: #000000;
	font-weight: bold;
	width: 125px;
	height: 33px;
	padding-left: 20px;

	background-image: url(left.png);

	background-image: url(right.png);
<p><br />
<a href="#"
	onclick="javascript:showConfirm('Please confirm','Are you really really sure to visit google?','Yes','','No','#')">JsConfirmStyled</a></p>
<p><a href="#" onclick="confirmation()">standard</a></p>


Then create simple js file name jsConfirmStyle.js. Here is simple js code



if(ie5||nn6) {
	if(ie5) cs=2,th=30;
	else cs=0,th=20;
		"<div id='jsconfirm'>"+
				"<tr><td id='jsconfirmtitle'></td></tr>"+
				"<tr><td id='jsconfirmcontent'></td></tr>"+
				"<tr><td id='jsconfirmbuttons'>"+
					"<input id='jsconfirmleft' type='button' value='' onclick='leftJsConfirm()' onfocus='if(this.blur)this.blur()'>"+
					"<input id='jsconfirmright' type='button' value='' onclick='rightJsConfirm()' onfocus='if(this.blur)this.blur()'>"+

document.write("<div id='jsconfirmfade'></div>");

function leftJsConfirm() {
function rightJsConfirm() {
function confirmAlternative() {
	if(confirm("Scipt requieres a better browser!")) document.location.href="";

leftJsConfirmUri = '';
rightJsConfirmUri = '';

 * Show the message/confirm box
function showConfirm(confirmtitle,confirmcontent,confirmlefttext,confirmlefturi,confirmrighttext,confirmrighturi)  {
	xConfirm=xConfirmStart, yConfirm=yConfirmStart;
	if(ie5) {
	else if(nn6) {
	else confirmAlternative();

then browse see nice You can download full source code from right menu bottom section.
If any query please post a comment.


About shafiqul
I am shafiq, i have passed B.Sc. in Computer Science and Engineering. 2010 from Rajshahi University of Engineering & Technology, Rajshahi. CGPA: 3.30 out of 4.00.

4 Responses to how to change the style of alert box

  1. Neo says:

    Not bad.
    I have a suggestion for you:
    Crete a link with demo for simple users 🙂

  2. Thanks Sir.
    Goood Example….
    Keep it up 😉

  3. Pingback: How to: How to edit a JavaScript alert box title? | SevenNet

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Web Development Resource

UI and UX Design

User Interface and User Experience

php tutorial

code,Tips,Tricks in php,mysql,javascript,jquery,ajax,yii,codeigniter,laravel,drupal,slim,bootstrap,api,jQuery Mobile

%d bloggers like this: