The Infinite Loop – Beginner's SEO, Beginner C# & JQuery Tutorials Problem. Problem Solved. Loop. – The life of a programmer

Custom Javascript Alert and Confirm Dialog boxes

This article will teach you how to make Custom Javascript Alert and Confirm Dialog boxes, and change the button text on dialog boxes.

For the most part, custom alert and confirm dialogs are not possible because alert and confirm dialog boxes are handled by the browser, however, there is a great JQuery plugin that will let you customize your alert boxes. If you don't know JQuery, do not worry, because i'll take you through it step by step. This little customization can make your web application that much more professional.

This will show you a little tutorial on how to make the custom alert and confirm dialogs AND How to return values from a custom confirm dialog box. This is EXTREMELY important. I have seen a lot of tutorials on how to do this, but none of them talk about actually retrieving the value of the response in a custom confirm dialog box..

Custom Javascript Alert Dialog Boxes

Step 1 : Download JQuery

Click on Current Release, you can click Uncompressed if you want to inspect the code, but you should use minified version for production.

In our site, we will make a folder called scripts, and we will put the jquery.js file into this folder.
We will also make a new file in the same folder named jquery.scripts.js.

Step 2: Download jquery.alerts (Right click, Save as) and the css here: jquery.alerts.css
NOTE: This plugin is no longer supported by http://abeautifulsite.net/, so use it at your own risk.

We will put the jquery.alerts.js into the scripts folder, and the jquery.alerts.css into a styles folder.

Step 3: The Setup
In our webpage we will add the references to these file.

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.scripts.js"></script>
<script type="text/javascript" src="scripts/jquery.alerts.js"></script>
<link href="styles/jquery.alerts.css" rel="stylesheet"/>

Once we have all these references in, we're ready to write some jquery.

Step 4: Open jquery.scripts.js
Type

$("document").ready(function(){

});

This sets up a function to be run when our document is ready.

In this document.ready function, type
alert('jquery loaded');

Refreshing your webpage, you should see an alert saying "jquery loaded", if you see this, you have setup jquery correctly. If you do not, check the steps above, or hit CTRL+F5, this does a cache refresh and requests a new copy of all the javascript and css files.

We will add a button to our site.
<input type="button" value="Custom Alert" id="customAlert"/>

In our document ready function, we will hook up a handler to handle the "click" event of this button.

$("document").ready(function(){
$("#customAlert").click(function(){
alert('this is an alert');
});
});

If you refresh your webpage (CTRL+F5) and click the button, you should see a normal javascript popup.
Now, change the alert to jAlert.
jAlert('this is a custom alert', 'this is a custom title');

Upon refreshing the page, and clicking the button, you should see a custom grey alert box. The styles can be modified by editing jquery.alerts.css.

If you'd like to read on Custom confirm dialog boxes, please continue reading.
By this point, jquery and the jquery alerts plugin and css should be setup.
Follow the above tutorial until you get to the actual jAlert method.

Comment if this helped!

Custom Javascript Confirm Dialog Boxes

Now, we will do a Custom Javascript Confirm Dialog.
The confirm function looks like this
jConfirm('msg', '[title]', [callback function]);

$("document").ready(function(){
$("#btnID").click(function(){
jConfirm('Would you like Ice Cream', 'msgBox Title', function(r){
if(r){
alert('you replied yes!');
}else{
alert('you replied no!');
}
}
});
});
This is the basic implementation of custom confirm boxes, however you can still customize these a little further.

Changing Javascript Alert Button Text

Before calling jAlert or jConfirm, you can set the button text.

$.alerts.okButton="OKAYYYYYYYYYY";
$.alerts.cancelButton="CANCELLLLLLLLLL";

This is also useful for localization.
For example in an english jquery.scripts.js you can have.

$.alerts.okButton = "yes";
$.alerts.cancelButton = "no";

And in a french jquery.scripts.js you can have

$.alerts.okButton="oui";
$.alerts.okButton="non";

Hopefully this helped you add that little extra touch.
For reference, here are the 2 methods, only the msg parameter is required.

jAlert('msg', '[title]', [callback function]);
jConfirm('msg', '[title]', [callback functoin]);

There you have it!
Please comment if this was helpful
Goodluck with your custom javascript!