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 80 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.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.