iOS Like Toast Notification & Modal Dialog Plugin - jQuery lDialog
| File Size: | 13.8 KB |
|---|---|
| Views Total: | 998 |
| 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.











