This time I will share jQuery Plugin and tutorial about Beautiful Alert/Prompt/Confirm Dialog Alternative – jQuery.alert.js, hope it will help you in programming stack.
A JavaScript popup window alternative that helps you create beautiful and customizable popup boxes for reminding something, confirming or denying something, or prompting the user for more information.
Fully responsive and easy to implement.
Key Features:
- Supports HTML content.
- Custom emphasized text.
- Custom confirm/cancel buttons.
- Confirm and cancel callbacks.
- Custom input types.
- Supports jQuery method chaining.
How to use it:
1. Add the jQuery.alert.js plugin’s files to the HTML page.
1 |
<link href="jquery.alert.css" rel="stylesheet" /> |
2 |
<script src="/path/to/cdn/jquery.min.js"></script> |
3 |
<script src="jquery.alert.min.js"></script> |
2. Create a custom alert dialog box.
1 |
$.alert('An Alert Dialog By jQueryScript',{ |
3. Create a custom confirm dialog box.
01 |
$.confirm('Are You Sure To Delete This Entry?',{ |
07 |
cancelEvent:function(){ |
4. Create a custom prompt dialog box.
1 |
$.prompt('Try To Type 1234',{ |
3 |
callEvent:function(val){ |
4 |
if(val==1234) $.alert('Invalid Password'); |
5 |
else $.alert('Logged In'); |
5. The plugin also supports jQuery method chaining.
01 |
$('.colorChange-btn').click(function() { |
02 |
$("#item-box").stop().animate( |
03 |
{"margin-left":"500px"},1000 |
05 |
{"margin-left":"0"},300 |
06 |
).delay(300).alert('Another Dialog', |
09 |
$("#item-box").stop().animate( |
10 |
{"margin-left":"500px"},1000 |
12 |
{"margin-left":"0"},300 |
6. All default configurations.
17 |
cancelButton:'Cancel', |
This awesome jQuery plugin is developed by hyunseung. For more Advanced Usages, please check the demo page or visit the official website.
