Handy Info/Confirm Modal Dialog Plugin - Timed Dialog
File Size: | 132 KB |
---|---|
Views Total: | 1566 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
The Timed Dialog helps developers create customizable info/alert/confirm modal dialogs to replace the native popup boxes.
Key Features:
- Easy to style using your own CSS.
- Auto dismisses after a timeout, with or without a countdown timer.
- Supports any HTML content embedded in the dialog.
- Allows you to append the dialog to any container element, not only the whole body.
How to use it:
1. Import the jQuery Timed Dialog plugin's files into the HTML file.
<link href="/path/to/css/timed-dialog.css" rel="stylesheet" /> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/dist/timed-dialog.min.js"></script>
2. Create a basic 'Info' dialog and override the default dialog title & body.
$().timedDialog({ body: '<b>HTML Content</b> is supported as well.', title: 'Dialog Title' });
3. Create a confirmation dialog and execute a function when the user clicks the 'Confirm' button.
$().timedDialog({ type: 'confirmation', body: 'Are You Sure?', title: 'Confirm Your Action', btnConfirm: { text: 'Confirm', action: () => { alert('done') }} });
4. Customize the width/height of the dialog.
$().timedDialog({ width: 400, height: 300 });
5. Determine whether to auto-close the dialog after a timeout, with an animated countdown timer on the 'Dismiss' button.
$().timedDialog({ closeOnTimer: true, timeout: 20, timeoutAnimation: true });
6. All default configuration options.
$().timedDialog({ type: 'info', title: 'Info', body: 'This is the default body text. You might replace this with your own.', width: 320, height: 240, appendTo: 'body', closeOnEscape: true, closeOnTimer: false, timeout: 10, //ten seconds default timeout timeoutAnimation: true, isModal: true, btnDismiss: { text: "Dismiss", class: '', }, btnConfirm: { text: "Confirm", action: () => { return }, class: '', } });
Changelog:
v1.1.6 (2024-03-03)
- Update
v1.1.5 (2024-02-18)
- Bugfix
v1.1.4 (2024-02-05)
- Add support for dark theme
- Bugfixes
v1.1.3 (2024-02-04)
- Added close dialog on esc key
- fix css path
2022-05-20
- v1.0.8: Update package
2022-05-19
- v1.0.5: Update package
2022-05-19
- v1.0.5: Update package
2021-12-29
- v1.0.4: Fixed icon alignment
2021-12-29
- v1.0.2: Update timed-dialog.js
2021-12-25
- v1.0.1
2021-03-08
- Improved performance
This awesome jQuery plugin is developed by armino-dev. For more Advanced Usages, please check the demo page or visit the official website.