snap-dialog-js
Advanced tools
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
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.
success, error, warning, info, htmlHere'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.
FAQs
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
The npm package snap-dialog-js receives a total of 1 weekly downloads. As such, snap-dialog-js popularity was classified as not popular.
We found that snap-dialog-js demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.