This is a common things for every developer. Like me many developer want's to change default alert dialog box style. After lot of google search i find a awesome way. That's why i am here.

alertify.js

 alertify.js is a awesome tool for you. This is fully open source js and very easy to implement for any developer who have little bit expert is Javascript.

 

Features:

1) Customizable look and feel

If you can edit CSS you can customize the look of alertify.js to match your needs

 

2) Growl-like notification

Unobtrusive notification messages can be used to give feedback to users or even as a console.log replacement

 

3) Simple API

From callbacks to handle OK and Cancel actions to customizable properties, using alertify.js is very straightforward Read full documentation

 

4) Lightweight, no dependencies

No matter the type of project, if JavaScript is available alertify.js can be used

 

5) Cross-browser and platform

Whether you use a desktop, laptop, tablet or mobile device, alertify.js has you covered

 

Download

For download click here

 

Usage

Include JS

<!-- ideally at the bottom of the page -->
<!-- also works in the <head> -->
<script src="PATH_TO_FILE/alertify.min.js"></script>

Include CSS

<!-- include the core styles -->
<link rel="stylesheet" href="PATH_TO_FILE/alertify.css" />
<!-- include a theme, can be included into the core instead of 2 separate files -->
<link rel="stylesheet" href="PATH_TO_FILE/alertify.default.css" />

Default Usage Dialogs

// alert dialog
alertify.alert("Message");
// confirm dialog
alertify.confirm("Message", function (e) {
    if (e) {
        // user clicked "ok"
    } else {
        // user clicked "cancel"
    }
});
// prompt dialog
alertify.prompt("Message", function (e, str) {
    // str is the input text
    if (e) {
        // user clicked "ok"
    } else {
        // user clicked "cancel"
    }
}, "Default Value");

For more information please visit http://fabien-d.github.io/alertify.js/