Draggable Alert & Confirm Dialog Box Library – DNDAlert

Category: Javascript , Modal & Popup | January 8, 2023
Views Total:349 views
Official Page:Go to website
Last Update:January 8, 2023


Draggable Alert & Confirm Dialog Box Library – DNDAlert


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) => {

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({
        console.log("Modal Opened");
        console.log("Modal Closed");


v2.5.3 (01/08/2023)

  • Deleted unnecessary log message

You Might Be Interested In:

Leave a Reply