I’ve wanted to write a jQuery plug-in for a long time, but I didn’t want to write one just for the exercise.
Last night I was messing around with overriding native JavaScript functions – among those the alert-function – and it hit me: why not write a plug-in for jQuery which overrides and personalizes alert messages without the need to change any existing code? And while I was at it, integrate the plug-in with jQuery UI and leverage the functionality of the Dialog widget?
So I did. And here’s what I came up with
Note: my WordPress theme seems to be interfering with the jQuery UI theme; breaking the styles on the close-button in the dialog.
The plug-in code
jQuery.altAlert = function (options)
{
var defaults = {
title: "Alert",
buttons: {
"Ok": function()
{
jQuery(this).dialog("close");
}
}
};
jQuery.extend(defaults, options);
delete defaults.autoOpen;
window.alert = function ()
{
jQuery("<div />", { html: arguments[0].replace(/\n/, "<br />") }).dialog(defaults);
};
};
And here’s how you use it… it’s pretty simple, really
$(function ()
{
$.altAlert();
});
After calling the plug-in constructor, all calls to the native alert-function will pop up a jQuery UI dialog instead of the boring standard dialog. Neat, huh?
My plug-in leverages the jQuery UI Dialog widget
And because my plug-in leverages jQuery UI, my plug-in…
- inherits solid code that has undergone rigorous testing
- generates solid markup that has been tested and looks the same in all A-grade browsers
- fully supports the jQuery UI Themeroller
On top of that: all the functionality available in the jQuery UI Dialog widget is available in my plug-in. This means that you can override the standard functionality of my plug-in – just like you would, using the jQuery UI Dialog widget – and change it’s default behavior:
$(function ()
{
$.altAlert(
{
modal: true,
closeOnEscape: false,
title: "Dang!... Stuff happend!",
buttons: {
"Ok": function()
{
window.location = "error.html";
}
}
});
});
In the above example, the code effectively locks down a page, preventing user-input, while the browser loads an error page.
In a few days time…
I will create a project on Google Code, and put up some live usage-examples… In the meantime; feel free to leave comment and tell me what you think.
Update…
I’ve added my plug-in to the endless list on the jQuery website. Here’s a direct link.
Hello
I am new to JQuery. I was trying to use your Alert plug-in but having some difficulty. I have a file called “jQuery.altAlert.cs”, containing your plug-in code. This file is being referenced from my html file i.e.
How do i call the alert method on a “element” click event? Right now I have a custom.js file which has all my J-Query logic and then I have your plug-in (all in the same directory). In my “custom.js” file if I replace my old alert code with yours nothing happens: i.e.
$(“a”).click(function() {
////alert(“Hello world!”); //old call
$.altAlert(); //new call
});
Please advice.
Thanks.
@Bev
After installing my plug-in, all calls to the native JavaScript alert() function will be replaced by jQuery UI’s dialog plug-in.
.. And as far as opening dialogs on-click, all you have to do is this:
$(“…”).click(function () { alert(“…”); });
This plugin does not show the alert text I normally see with the native javascript alert box. It is blank.
@SX: Try copy/paste my example-code into a clean HTML file (with references to my code and the jQuery + UI library code, ‘fcourse). I just tested it myself. Works fine. I suspect you’ve left out some of my code, or that you’ve got a bug in your code, presseding my plugin code.
Hi , i want use this plugin on page load is that possible ?
@volkan
Yes, it is. Seeing as this is a jQuery plug-in; all you need to do is execute it in jQuery’s document.ready callback: http://docs.jquery.com/Tutorials:Introducing_$(document).ready()
Works perfectly,, good work,,
Great plugin, thanks!
hi, new to the site, thanks.
perfectly working……
very nice
but one small doubt
focus is not setting while alert is opened…
please tell.. how to set focus….
Hi Gunaseelan. Can you elaborate? I’m not sure what you’re asking
I think that this peice:
arguments[0].replace(/\n/, “”)
should be
arguments[0].replace(/\n/g, “”)
but neither work, when I alert with line breaks it all runs together. Any idea how to fix that?
Nevermind lol. It works fine, my bad. But you need the /g for multiple line breaks