jQuery Alert Dialogs - replacing the standard functions Alert (), Confirm () and Prompt ()

The jQuery Alert Dialogs plugin is designed to replace the basic functionality of standard JavaScript alerts, alert (), confirm (), and prompt () functions. They are fully customizable using CSS (this will make your site look much more attractive). And you can also customize a custom title for each dialog box.

These methods simulate ordinary modal dialog boxes. They automatically change their position when the browser window changes. If you enable the jQuery UI Draggable plugin, you can move the windows by dragging them by the headers. Unlike standard JavaScript functions, you can use HTML in the message. For example, to set a newline, you can use either \ n or <br />.

The following scripts are required for the plugin to work:
')




< link href="/path/to/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />

Functions are called as follows:

* jAlert (message, [title, callback])
* jConfirm (message, [title, callback])
* jPrompt (message, [value, title, callback])

Code example:

1. <script type = "text / javascript" >
2. $ ( document ) .ready ( function () {
3. $ ( "#alert_button" ) .click ( function () {
4. jAlert ( 'This is a custom alert box' , 'Alert Dialog' );
5. });
6. $ ( "#confirm_button" ) .click ( function () {
7. jConfirm ( 'Can you confirm this?' , 'Confirmation Dialog' , function (r) {
8. jAlert ( 'Confirmed:' + r, 'Confirmation Results' );
9. });
10. });
11. $ ( "#prompt_button" ) .click ( function () {
12. jPrompt ( 'Type something:' , 'Prefilled value' , 'Prompt Dialog' , function (r) {
13. if (r) alert ( 'You entered' + r);
14. });
15. });
16. $ ( "#alert_button_with_html" ) .click ( function () {
17. jAlert ( 'You can use HTML, such as <strong> bold </ strong>, <em> italics </ em>, and <u> underline </ u>!' );
18. });
19. $ ( ".alert_style_example" ) .click ( function () {
20. $ .alerts.dialogClass = $ ( this ) .attr ( 'id' ); // set custom style class
21. jAlert ( 'This is the custom class called & ldquo; style_1 & rdquo;' , 'Custom Styles' , function () {
22. $ .alerts.dialogClass = null ; // reset to default
23. });
24. });
25. });
26. </ script>

* This source code was highlighted with Source Code Highlighter .

Disadvantages:
* The ENTER and ESC keys (confirm / cancel) do not work in WebKit browsers.
* Draggable plugin currently not working in Opera
* In IE6, position: fixed is not supported.

Demonstration