Author: | ismailfp |
---|---|
Views Total: | 299 views |
Official Page: | Go to website |
Last Update: | January 8, 2023 |
License: | MIT |
Preview:

Description:
DNDAlert is a JavaScript library for creating draggable, animated, customizable, modal-style alert & confirmation dialog popups on your web app.
It’s written on top of vanilla JavaScript, and it does not require any other libraries or frameworks.
More Features:
- Supports HTML content in messages.
- Custom action buttons.
- 4 themes: success, error, warning, info.
- Dark & Light modes.
- Custom dialog header & footer.
- Responsive design.
How to use it:
1. Download and import the DNDAlert.js.
<script src="./DNDAlert.js"></script>
2. Create an empty DIV to hold the dialog modal.
<div id="modal"></div>
3. Create a basic alert dialog.
const myAlert = new DNDAlert({ title: "Alert Dialog", message: "This is an alert dialog", buttons: [ { text: "Ok", class: "btn btn-primary", // or type: "success", // primary,secondary,success,danger,warning click: (bag) => { alert("Ok button clicked"); }, } ], });
4. Create a basic confirmation dialog.
const myConfirm = new DNDAlert({ title: "Confirm Dialog", message: "This is a confirmation dialog", buttons: [ { text: "Confirm", click: (bag) => { alert("Confirm button clicked"); }, } ], { text: "Cancel", click: (bag) => { bag.CLOSE_MODAL(); }, }, });
5. Available options to customize the dialog modal.
const myConfirm = new DNDAlert({ closeBackgroundClick: true, animationStatus: true, openAnimationStatus: true, type: false, // success, error, warning, info theme: 'white', // or 'dark' html: false, // allows HTML content autoCloseDuration: false, closeIcon: true, draggable: false, buttons: [], textAlign: "left", opacity: 1, portalElement: document.body, portalOverflowHidden: true, containerRef: null, content_boxRef: null, alert_titleRef: null, alert_messageRef: null, headerRef: null, button_groupRef: null, });
6. Callback functions.
const myConfirm = new DNDAlert({ onOpen:(bag)=>{ console.log("Modal Opened"); console.log(bag.PROPETIES); }, onClose:(bag)=>{ console.log("Modal Closed"); console.log(bag.PROPETIES); }, });
Changelog:
v2.5.3 (01/08/2023)
- Deleted unnecessary log message