DNDAlert.js
DNDAlert is a simple JavaScript library alert for web developers.
Examples
Features
- SVG Types ( success 🟢 , error 🔴 , warning 🟠, info 🔵 )
- Unlimited button support
- HTML message support
- Easy to set up and use
- Callback bag
- Responsive
- Animation
- Theme (white 🌕 , dark 🌑)
- Draggable
Simple Usage
const Alert = new DNDAlert({
message: "DNDAlert is a simple JavaScript library alert for web developers.",
});
- [message]
- Null values cannot be entered. The content of the alert.
Usage
const Alert = new DNDAlert({
title: "Test Alert",
message:
"<b>DNDAlert</b> is a simple JavaScript library alert for web developers.",
type: "warning",
html: true,
buttons: [
{
text: "Ok",
class: "btn btn-primary",
onClick: (bag) => {
alert("Ok button clicked");
},
},
{
text: "Cancel",
type: "danger",
onClick: (bag) => {
bag.CLOSE_MODAL();
},
},
],
closeBackgroundClick: true,
portalElement: document.querySelector("#modal"),
portalOverflowHidden: true,
textAlign: "center",
theme: "dark",
onOpen: (bag) => {
console.log("Modal Opened");
console.log(bag);
},
onClose: (bag) => {
console.log("Modal Closed");
console.log(bag.PROPERTIES);
},
opacity: 1,
autoCloseDuration: 3000,
draggable: true,
animationStatus: true,
closeIcon: false,
sourceControlWarning: true,
});
-
[title]
- Message title (If not given, a modal with no header is created.)
-
[html]
- Message whether to use HTML in the message.
-
[buttons]
-
It is an array. Keeps the buttons inside.
-
[text] Text inside the button
-
[class] Sets the class of the button. * If not defined, it comes with the library's default button style (light)
-
[type] Default button styles available in the library [primary,secondary,success,danger,warning,light]
-
-
[onClick] Function to run after clicking the button.
-
[closeBackgroundClick] If true, clicking (not Modal) the background closes the Modal
-
[autoCloseDuration] Takes value (X) in milliseconds and closes modal after X milliseconds.
-
[onOpen] The function is called by the library when the modal is opened.
-
[onClose] The function is called by the library when the modal is closed.
-
[closeIcon] Sets the status of the close button on the top right (invisible if false)
-
[portalElement] To call a modal on an element other than body
-
[portalOverflowHidden] Portal overflow hidden
-
[textAlign] Css property of message
-
[theme] Theme (dark AND white)
-
[type] success,error,warning and info | If it is not entered, the type will not be displayed, only the message will be show.
-
[opacity] Modal css opacity.
-
[animationStatus] If true, opening and closing will be accompanied by animation.
-
[draggable] Modal draggable. (Title required)
-
[sourceControlWarning] If true, when the modal is run, it makes a request to NPM and compares the current version with the local version. If the versions are different, a warning message in the console. (If you don't want to make a npm version request, you can turn it off.)
Installation
cd my-web-project
npm i dndalertjs
or
cd my-web-project
git clone https://github.com/ismailfp/DNDAlert.js.git
Default Value List
Property | Value |
---|
portalElement | document.body |
portalOverflowHidden | true |
animationStatus | true |
closeIcon | true |
closeBackgroundClick | true |
sourceControlWarning | true |
type | false |
autoCloseDuration | false |
draggable | false |
html | false |
title | false |
buttons[] > class | light |
theme | white |
opacity | 1.00 |
textAlign | left |
BAG_ELEMENT
- onOpen,onClose and click function of the buttons
Property | ? |
---|
CLOSE_MODAL | Modal closing function |
PROPERTIES | Contains general information |
PROPERTIES->CREATED_TIME | Modal opening date |
PROPERTIES->THEME | THEME |
PROPERTIES->VERSION | Current version (DNDAlert - NPM) |
PROPERTIES->CONTEXT | Everything in Context |
PROPERTIES->HOW_MANY_SECONDS | Only onClose BAG (Shows how many seconds the alert on after closing) |