dndalertjs v2.5.3

DNDAlert.js

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.

    • The library sends a BAG_ELEMENT object to this function, which contains the CLOSE_MODAL function needed to close the modal

      onClick: (BAG_ELEMENT) => {
           BAG_ELEMENT.CLOSE_MODAL();
         },

• 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

cd my-web-project
git clone https://github.com/ismailfp/DNDAlert.js.git

Default Value List

BAG_ELEMENT

• onOpen,onClose and click function of the buttons