Draggable Alert & Confirm Dialog Box Library – DNDAlert

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