├── js ├── example.js └── wow-alert.js ├── README.md ├── css ├── example.css └── wow-alert.css └── index.html /js/example.js: -------------------------------------------------------------------------------- 1 | function wow_default_alert () { 2 | alert("Hello World!"); 3 | } 4 | function wow_default_alert_with_callback(){ 5 | alert("Hello World! Press 'YES' & Check Your Console Log.", 6 | { 7 | label: "YES", 8 | success: function () { 9 | console.log("User clicked YES"); 10 | } 11 | } 12 | ); 13 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

WOW Alert: A jQuery plugin to override native alert() method

2 |

Wow Alert is a simple jQuery plugin that turn default alerts in pretty nice dialog.

3 | 4 |

5 | 6 |

How to use

7 |

Just include the file wow-alert.js and wow-alert.css in your html file.
Run usually the method alert() - alert("Something")
Use the second parameter to set the button's label. - alert("Something", "OK")
All done!

13 |

Exemple with callback

14 |

15 |     alert("Hello World!",
16 |     {
17 |         label: "YES",
18 |         success: function () {
19 |             console.log("User clicked YES");
20 |         }
21 |     }
22 | 
23 |     );
24 |

25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /css/example.css: -------------------------------------------------------------------------------- 1 | body 2 | { 3 | font-family: monospace; 4 | margin: 0 auto; 5 | color: #fff; 6 | background: #0080c0; 7 | } 8 | button 9 | { 10 | font-size: 16px; 11 | font-variant: small-caps; 12 | padding: 10px; 13 | cursor: pointer; 14 | -webkit-transition: background 2s, color 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */ 15 | transition: background 2s, color 2s, transform 2s; 16 | border: 1px solid #fff; 17 | } 18 | button:hover 19 | { 20 | color: #fff; 21 | background: #000; 22 | } 23 | .header 24 | { 25 | font-size: 22px; 26 | margin: 20px 0 20px 0; 27 | padding: 10px; 28 | text-align: center; 29 | } 30 | .container 31 | { 32 | margin: 20px 0 20px 0; 33 | padding: 10px; 34 | text-align: center; 35 | background: #dcdcdc; 36 | } 37 | .footer 38 | { 39 | font-size: 10px; 40 | padding: 10px; 41 | text-align: center; 42 | } 43 | .wrapper 44 | { 45 | text-align: center; 46 | } 47 | .description 48 | { 49 | width: 433px; 50 | margin: 0 auto; 51 | padding: 10px; 52 | text-align: left; 53 | } 54 | ul li 55 | { 56 | line-height: 200%; 57 | } 58 | .code 59 | { 60 | padding: 5px; 61 | color: #000; 62 | background: #fff; 63 | } 64 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 12 |

13 | 14 | 15 |

16 |

17 |

18 | WOW Alert: How to use 19 |

Just include the file wow-alert.js and wow-alert.css in your html file.
Run usually the method alert() - alert("Something")
Use the second parameter to set the button's label. - alert("Something", "OK")
All done!

26 |

27 |

28 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /css/wow-alert.css: -------------------------------------------------------------------------------- 1 | .wow-alert-overlay { 2 | position:fixed; 3 | top:0; 4 | left:0; 5 | background:rgba(0, 0, 0, 0.6); 6 | z-index:500; 7 | width:100%; 8 | height:100%; 9 | z-index: 999999; 10 | } 11 | .wow-alert-content { 12 | -webkit-transition: all .5s ease-in-out; 13 | -moz-transition: all .5s ease-in-out; 14 | -o-transition: all .5s ease-in-out; 15 | -ms-transition: all .5s ease-in-out; 16 | background:#FFF; 17 | -moz-border-radius:3px; 18 | -webkit-border-radius:3px; 19 | border-radius:3px; 20 | -khtml-border-radius:3px; 21 | position:fixed; 22 | z-index:99999999; 23 | min-width:200px; 24 | min-height:50px; 25 | max-width:75%; 26 | padding: 15px 20px; 27 | left: 50%; 28 | top: 50%; 29 | } 30 | .wow-alert-content p { 31 | font-family: Helvetica, Arial, sans-serif; 32 | font-size: 14px; 33 | color: #333; 34 | margin: 10px 0 20px 0; 35 | font-weight: bold; 36 | text-align: center; 37 | } 38 | .wow-alert-content a { 39 | -webkit-transition: all .5s ease-in-out; 40 | -moz-transition: all .5s ease-in-out; 41 | -o-transition: all .5s ease-in-out; 42 | -ms-transition: all .5s ease-in-out; 43 | font-family: Helvetica, Arial, sans-serif; 44 | -moz-border-radius:3px; 45 | -webkit-border-radius:3px; 46 | border-radius:3px; 47 | -khtml-border-radius:3px; 48 | text-transform: uppercase; 49 | font-weight: bold; 50 | font-size: 11px; 51 | text-align: center; 52 | margin: 10px; 53 | color: #F6FAF7; 54 | display: block; 55 | margin: 0 auto; 56 | width: 100px; 57 | background: #579959; 58 | text-decoration: none; 59 | height: 30px; 60 | line-height: 30px; 61 | } 62 | .wow-alert-content a:hover { 63 | background: #477F4A; 64 | } 65 | -------------------------------------------------------------------------------- /js/wow-alert.js: -------------------------------------------------------------------------------- 1 | ; 2 | (function ($) { 3 | 4 | 5 | var defaults = { 6 | label: "OK", 7 | autoClose: true 8 | }; 9 | 10 | jQuery.fn.extend({ 11 | halfWidth: function () { 12 | var width = 0; 13 | this.each(function () { 14 | width += $(this).outerWidth() / 2; 15 | }); 16 | return width; 17 | }, 18 | halfHeight: function () { 19 | var height = 0; 20 | this.each(function () { 21 | height += $(this).outerHeight() / 2; 22 | }); 23 | return height; 24 | } 25 | }); 26 | function centerWindow() { 27 | this._alertWindow.css({ 28 | marginLeft: -this._alertWindow.halfWidth(), 29 | marginTop: -this._alertWindow.halfHeight() 30 | }); 31 | } 32 | 33 | function createWindow(msg) { 34 | var elements = $("

" + msg + "

" + this.options.label + "

"); 35 | this._alertOverlay = $(elements[0]); 36 | this._alertWindow = $(elements[1]); 37 | 38 | this._actionButton = this._alertWindow.find('a'); 39 | 40 | this._alertOverlay.appendTo("body"); 41 | this._alertWindow.appendTo("body"); 42 | 43 | return [this._alertOverlay, this._alertWindow]; 44 | } 45 | 46 | function configureActions() { 47 | var context = this; 48 | 49 | this._actionButton.bind('click', function (e) { 50 | e.preventDefault(); 51 | if (context.options.autoClose) close(); 52 | if (context.options.success) context.options.success(); 53 | }); 54 | } 55 | 56 | function close() { 57 | this._alertOverlay.remove(); 58 | this._alertWindow.remove(); 59 | } 60 | window.alert = function (msg, opts) { 61 | this.options = $.extend(defaults, opts); 62 | 63 | createWindow(msg); 64 | centerWindow(); 65 | configureActions(); 66 | 67 | } 68 | 69 | }(jQuery)); 70 | --------------------------------------------------------------------------------