iOS Like Toast Notification & Modal Dialog Plugin - jQuery lDialog
File Size: | 13.8 KB |
---|---|
Views Total: | 866 |
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.
<link rel="stylesheet" href="./dist/css/lDialog.css"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"> </script> <script src="./dist/js/lDialog.js"></script>
2. Create a toast notification which auto dismisses after 2 seconds in this example:
$.lDialog.toast({ // toast content content:'This is a toast', // auto dimisses after 2 seconds duration: 2000, // theme name theme:'default' });
3. Create a toast notification with an icon.
$.lDialog.iconToast({ // toast title title: 'This is a toast', // or 'error' icon: 'success', // theme name theme:'default', // auto dimisses after 2 seconds duration: 2000 })
4. Create a loading indicator with custom loading text.
$.lDialog.sLoadingToast({ // loading text title: 'Loading...', // theme name theme:'default' }) // close the loading indicator manually $.lDialog.hLoadingToast()
4. Create a modal-style alert dialog.
$.lDialog.modal({ // modal title title:'Alert', // modal content content:'Alert Content', // button text footerText:'Okey' })
6. Create a modal-style confirmation dialog with a calbback function which will be fired when you click the 'confirm' button.
$.lDialog.btnModal({ // confirm title title:'Dialog Title', // confirm content content:'Dialog Body' },function(){ console.log("Confirmed"); })
This awesome jQuery plugin is developed by evinLiang. For more Advanced Usages, please check the demo page or visit the official website.