SnapDialog is a versatile JavaScript plugin offering customizable prompt boxes and notification dialog alerts. Capture user input or deliver dynamic notifications with ease. Its intuitive API and flexible options ensure smooth integration, enhancing user interaction while combining simplicity with power.
-
Customizable notification types:
success,error,warning,info,html - Input field support: Allows input within dialogs
- Progress bar support: Option to include a progress bar that tracks the duration before auto-close
- RTL support: Right-to-left text support
- Dark mode: Option to toggle between light and dark modes
- Sizing options: Multiple Size for displaying dialog
- Animation options: Various animations for notification appearance
- Event handlers: Custom actions for confirm, cancel, and close events
- Custom icons: Ability to define custom icons for each notification type
Here's how to use SnapDialog in your project:
Include the stylesheet on your document's
</head> tag.
<head>
<link rel="stylesheet" href="snap-dialog.css">
<!-- Or -->
<link rel="stylesheet" href="snap-dialog.min.css">
</head>Instead of installing you may use the remote version.
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/snap-dialog-js@latest/dist/snap-dialog.css">
<!-- Or -->
<link rel="stylesheet"
href="https://unpkg.com/snap-dialog-js@latest/dist/snap-dialog.min.css">
</head>Include the Plugin on your document's before </body> tag.
<script src="/snap-dialog.js"></script>
<!-- Or -->
<script src="/snap-dialog.min.js"></script>Instead of installing you may use the remote version.
<script src="https://cdn.jsdelivr.net/npm/snap-dialog-js@latest/dist/snap-dialog.js"></script>
<!-- Or -->
<script src="https://unpkg.com/snap-dialog-js@latest/dist/snap-dialog.min.js"></script>`
SnapDialog().success('Success Title', 'This is a success message.');SnapDialog().error('Error Title', 'This is an error message.');SnapDialog().info('Info Title', 'This is an information message.');SnapDialog().warning('Warning Title', 'This is a warning message.');SnapDialog().html('<div><h3>Custom HTML</h3><p>This is a custom HTML dialog.</p></div>');You can configure global options for the plugin:
SnapDialog().SnapDialogOptions({
rtl: true,
isDark: true,
autoClose : true,
duration: 5000
});You can handle confirm and cancel actions within a dialog:
SnapDialog().alert('Confirm Action', 'Are you sure?', {
enableConfirm: true,
onConfirm: function() {
console.log('Confirmed');
},
enableCancel: true,
onCancel: function() {
console.log('Cancelled');
}
});You can create dialogs that include input fields:
SnapDialog().alert('Input Dialog', 'Please enter your name:', {
input: 'text',
inputPlcaeholder: 'Your name',
enableConfirm: true,
onConfirm: function(inputValue) {
console.log('Input value:', inputValue);
}
});SnapDialog().clearAll();| Option | Type | Default | Description |
|---|---|---|---|
rtl |
boolean |
false |
Enables right-to-left text alignment. |
type |
string |
null |
Notification type (success, error, warning, info). |
title |
string |
'Default Title' |
Title for the notification. |
message |
string |
'This is a default message' |
Message for the notification. |
icon |
string |
null |
Icon to display. |
customIcon |
string |
null |
Custom icon in HTML format. |
confirmText |
string |
'OK' |
Text for the confirm button. |
enableConfirm |
boolean |
true |
Enables confirm button. |
onConfirm |
function |
function() {} |
Callback function when confirm is clicked. |
onCancel |
function |
function() {} |
Callback function when cancel is clicked. |
enableCancel |
boolean |
false |
Enables cancel button. |
cancelText |
string |
'Cancel' |
Text for the cancel button. |
enableCloseHandler |
boolean |
false |
Enables a custom close handler when the dialog is closed. |
onClose |
function |
function() {} |
Callback function when the dialog is closed. |
clickToClose |
boolean |
false |
Allows clicking "close button" to close it. |
OutsideClose |
boolean |
false |
Allows clicking outside the dialog to close it. |
autoClose |
boolean |
false |
Automatically closes the dialog after the specified duration. |
duration |
number |
3000 |
Duration before auto-close (in milliseconds). |
preogressBar |
boolean |
false |
Shows a progress bar for the duration. |
isDark |
boolean |
false |
Enables dark mode for the dialog. |
animation |
string |
'slide' |
Animation style (slide, fade, zoom). |
input |
string |
null |
Type of input field (text, number, email, etc.). |
inputPlcaeholder |
string |
'' |
Placeholder for the input field. |
inputMask |
string |
null |
Mask for the input field. |
size |
string |
null |
Dialog size (sm, md, lg, xl, 2xl, 3xl, 4xl). |
This plugin is open-source and available under the MIT License.