jAlert

Overview.

This is just another jQuery alert designed by @abeautifulsite and not maintained by the author. But since it seems to be the easy, neat and tiny plugin, I'm bringing it back to life from where the makers left it! The total minified file size of JS & CSS is ~6KB!

Why another jQuery plugin? Because Enterprise!

When you have plethora of better, beautiful sleek alert plugins, why am I bringing such old alert back? This is what I asked before I moved the source from original host! Well, the answer is, this is what worked for my requirement. If you have the freedom to choose which browsers your application is going to run, then I'm sure no one will have a look at this plugin. But in enterprise application development, where IE 7/8 is still the mainstream browser, this plugin will be a boon! Right, this one works out of the box from IE6 and up!! So with little modifications and less effort, you can have custom alert rather than banging your head on the wall to figure out why some good looking alert is not working in older versions of browsers!

Setup

Include the CSS/JS files somewhere in the page(js should be after jQuery! Duh!)

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

and call the alert like

jAlert('This is a custom alert box', 'Alert Dialog');

Type of Alert

jAlert plugin has regular Alert, prompt and confirm. You can add HTML's inside the message, modify the styles dynamically based on the pages/modules as you wish. It is that easy!

Regular Alert

jAlert('This is a custom alert box', 'Alert Dialog');

Prompt

jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
 if( r ) alert('You entered ' + r);
});

Confirm

jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
 jAlert('Confirmed: ' + r, 'Confirmation Results');
});

With HTML

jAlert('You can use HTML, such as bold, italics, and underline!');

Custom Confirm(Add your own button name, wherever you need instead of plain OK & Cancel!)

jCustomConfirm('Can you confirm this custom dialog?', 'Confirm Header', 'Think about it', 'Maybe Later');

Dynamic Styling with Custom CSS

/* Custom dialog styles */
        #popup_container.style_1 {
            font-family: Georgia, serif;
            color: #A4C6E2;
            background: #005294;
            border-color: #113F66;
        }

        #popup_container.style_1 #popup_title {
            color: #FFF;
            font-weight: normal;
            text-align: left;
            background: #76A5CC;
            border: solid 1px #005294;
            padding-left: 1em;
        }

        #popup_container.style_1 #popup_content {
            background: none;
        }

        #popup_container.style_1 #popup_message {
            padding-left: 0em;
        }

        #popup_container.style_1 INPUT[type='button'] {
            border: outset 2px #76A5CC;
            color: #A4C6E2;
            background: #3778AE;
        }

Assign it to any event!

// Add it for button!
$(".alert_style_example").click( function() {
                $.alerts.dialogClass = $(this).attr('id'); // set custom style class
                jAlert('This is the custom class called “style_1”', 'Custom Styles', function()    {
                    $.alerts.dialogClass = null; // reset to default
                });
            });

To Change Opacity, just add $.alerts.overlayOpacity = 0.1; and to change color, $.alerts.overlayColor = #000000;on document.ready to make it work!

Authors and Contributors

Contributors are welcome to make it look better or add anything as you wish!

Additional Information It supports IE7 and above! Yay! So for anyone out there who want an simple jquery alert plugin, this is it for you! Never tested in IE6, but as per the original author, it should work in IE6 too!

Support or Contact

Use the github issue tracking to post all your issues!