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.

You can use simple alertify js so this is url : http://alertifyjs.com/

 

option 2.

Create simple html file

 
<html>
<head>
<title>jsConfirmSyle</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22jsConfirmStyle.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%0Afunction%20confirmation()%20%7B%0A%09var%20answer%20%3D%20confirm(%22Wanna%20visit%20google%3F%22)%0A%09if%20(answer)%7B%0A%09%09window.location%20%3D%20%22http%3A%2F%2Fwww.google.com%2F%22%3B%0A%09%7D%0A%7D%0A%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0Abody%20%7B%0A%09background-color%3A%20white%3B%0A%09font-family%3A%20sans-serif%3B%0A%7D%0A%23jsconfirm%20%7B%0A%09border-color%3A%20%23c0c0c0%3B%0A%09border-width%3A%202px%204px%204px%202px%3B%0A%09left%3A%200%3B%0A%09margin%3A%200%3B%0A%09padding%3A%200%3B%0A%09position%3A%20absolute%3B%0A%09top%3A%20-1000px%3B%0A%09z-index%3A%20100%3B%0A%7D%0A%0A%23jsconfirm%20table%20%7B%0A%09background-color%3A%20%23fff%3B%0A%09border%3A%202px%20groove%20%23c0c0c0%3B%0A%09height%3A%20150px%3B%0A%09width%3A%20300px%3B%0A%7D%0A%0A%23jsconfirmtitle%20%7B%0A%09background-color%3A%20%23B0B0B0%3B%0A%09font-weight%3A%20bold%3B%0A%09height%3A%2020px%3B%0A%09text-align%3A%20center%3B%0A%7D%0A%0A%23jsconfirmbuttons%20%7B%0A%09height%3A%2050px%3B%0A%09text-align%3A%20center%3B%0A%7D%0A%0A%23jsconfirmbuttons%20input%20%7B%0A%09background-color%3A%20%23E9E9CF%3B%0A%09color%3A%20%23000000%3B%0A%09font-weight%3A%20bold%3B%0A%09width%3A%20125px%3B%0A%09height%3A%2033px%3B%0A%09padding-left%3A%2020px%3B%0A%7D%0A%0A%23jsconfirmleft%7B%0A%09background-image%3A%20url(left.png)%3B%0A%7D%0A%0A%23jsconfirmright%7B%0A%09background-image%3A%20url(right.png)%3B%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

</head>
<body>


<a href="#" onclick="javascript:showConfirm('Please confirm','Are you really really sure to visit google?','Yes','http://www.google.com','No','#')">JsConfirmStyled</a>



<a href="#" onclick="confirmation()">standard</a>


</body>
</html>

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

  
  
ie5=(document.getElementById&&document.all&&document.styleSheets)?1:0;
nn6=(document.getElementById&&!document.all)?1:0;

xConfirmStart=800;
yConfirmStart=100;

if(ie5||nn6) {
	if(ie5) cs=2,th=30;
	else cs=0,th=20;
	document.write(
		"
<div id='jsconfirm'>
"+
			"
<table>"+
				"
<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()'>"+
					"&nbsp;&nbsp;"+
					"<input id='jsconfirmright' type='button' value='' onclick='rightJsConfirm()' onfocus='if(this.blur)this.blur()'>"+
				"</td>
</tr>

"+
			"</table>

"+
		"</div>

"
	);
}

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

");


function leftJsConfirm() {
	document.getElementById('jsconfirm').style.top=-1000;
	document.location.href=leftJsConfirmUri;
}
function rightJsConfirm() {
	document.getElementById('jsconfirm').style.top=-1000;
	document.location.href=rightJsConfirmUri;
}
function confirmAlternative() {
	if(confirm("Scipt requieres a better browser!")) document.location.href="http://www.mozilla.org";
}

leftJsConfirmUri = '';
rightJsConfirmUri = '';

/**
 * Show the message/confirm box
 */
function showConfirm(confirmtitle,confirmcontent,confirmlefttext,confirmlefturi,confirmrighttext,confirmrighturi)  {
	document.getElementById("jsconfirmtitle").innerHTML=confirmtitle;
	document.getElementById("jsconfirmcontent").innerHTML=confirmcontent;
	document.getElementById("jsconfirmleft").value=confirmlefttext;
	document.getElementById("jsconfirmright").value=confirmrighttext;
	leftJsConfirmUri=confirmlefturi;
	rightJsConfirmUri=confirmrighturi;
	xConfirm=xConfirmStart, yConfirm=yConfirmStart;
	if(ie5) {
		document.getElementById("jsconfirm").style.left='25%';
		document.getElementById("jsconfirm").style.top='35%';
	}
	else if(nn6) {
		document.getElementById("jsconfirm").style.top='25%';
		document.getElementById("jsconfirm").style.left='35%';
	}
	else confirmAlternative();
}



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

Advertisements

About shafiqul
I am Shaikh Shafiqul Islam.I am working as a software engineer at Premium Web Cart in Bangladesh. I had completed my B.SC majoring Computer Science and Engineering in 2010 at the Dept of CSE in Ruet(Rajshahi University of Engineering & Technology), a leading engineering university of Bangladesh. I want to explore myself with latest technology and also want to develop my Career with well-established and fast growing IT Industry in Bangladesh. I started this blog to keep all the interesting PHP, HTML,Javascript,Ajax, Jquery related information.

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:

WordPress.com Logo

You are commenting using your WordPress.com 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

Resource

Web Development Resource

UI and UX Design

User Interface and User Experience

Tutorial

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

%d bloggers like this: