This time I will share jQuery Plugin and tutorial about iOS Like Toast Notification & Modal Dialog Plugin – jQuery lDialog, hope it will help you in programming stack.
| File Size: | 13.8 KB |
|---|---|
| Views Total: | 624 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
lDialog is a lightweight, multi-purpose jQuery popup box plugin that lets you create iOS inspired toast notifications, loading indicators, and alert/confirm modal windows on the web app.
Built-in themes:
- Default
- Primary
- Link
- Success
- Info
- Warning
- Danger
How to use it:
1. To get started put the following JavaScript and CSS files in your document.
1 |
<link rel="stylesheet" href="./dist/css/lDialog.css"> |
2 |
<script src="https://code.jquery.com/jquery-3.3.1.min.js" |
3 |
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" |
4 |
crossorigin="anonymous"> |
5 |
</script> |
6 |
<script src="./dist/js/lDialog.js"></script> |
2. Create a toast notification which auto dismisses after 2 seconds in this example:
01 |
$.lDialog.toast({ |
02 |
03 |
// toast content |
04 |
content:'This is a toast', |
05 |
06 |
// auto dimisses after 2 seconds |
07 |
duration: 2000, |
08 |
09 |
// theme name |
10 |
theme:'default' |
11 |
|
12 |
}); |
3. Create a toast notification with an icon.
01 |
$.lDialog.iconToast({ |
02 |
03 |
// toast title |
04 |
title: 'This is a toast', |
05 |
06 |
// or 'error' |
07 |
icon: 'success', |
08 |
09 |
// theme name |
10 |
theme:'default', |
11 |
12 |
// auto dimisses after 2 seconds |
13 |
duration: 2000 |
14 |
15 |
}) |
4. Create a loading indicator with custom loading text.
01 |
$.lDialog.sLoadingToast({ |
02 |
03 |
// loading text |
04 |
title: 'Loading...', |
05 |
06 |
// theme name |
07 |
theme:'default' |
08 |
}) |
09 |
10 |
// close the loading indicator manually |
11 |
$.lDialog.hLoadingToast() |
4. Create a modal-style alert dialog.
01 |
$.lDialog.modal({ |
02 |
03 |
// modal title |
04 |
title:'Alert', |
05 |
06 |
// modal content |
07 |
content:'Alert Content', |
08 |
09 |
// button text |
10 |
footerText:'Okey' |
11 |
|
12 |
}) |
6. Create a modal-style confirmation dialog with a calbback function which will be fired when you click the ‘confirm’ button.
01 |
$.lDialog.btn<a href="https://www.jqueryscript.net/tags.php?/Modal/">Modal</a>({ |
02 |
03 |
// confirm title |
04 |
title:'Dialog Title', |
05 |
06 |
// confirm content |
07 |
content:'Dialog Body' |
08 |
|
09 |
},function(){ |
10 |
console.log("Confirmed"); |
11 |
}) |
This awesome jQuery plugin is developed by evinLiang. For more Advanced Usages, please check the demo page or visit the official website.
source : jquery.net
