Create Dynamic Draggable Alert/Confirm Popups – webcimes-modal

Preview:

Description:

A highly customizable modal JavaScript library for creating animated, draggable alert/confirm popup boxes programmatically.

How to use it:

1. Install and import the webcimes-modal.

# NPM
$ npm i webcimes-modal

import {WebcimesModal} from "webcimes-modal";

<!-- OR -->
<script src="./dist/js/udm/webcimes-modal.udm.min.js"></script>
<link rel="stylesheet" href="/dist/css/webcimes-modal.min.css" />

2. Create a basic alert dialog.

const myModal = new WebcimesModal({
      titleHtml: "Alert Dialog",
      bodyHtml: "Alert Body"
});

3. Create a confirmation dialog that loads content from the existing DOM within the document.

const myModal = new WebcimesModal({
      titleHtml: "Confirm Dialog", 
      bodyHtml: document.querySelector(".test").outerHTML,
      onConfirmButton: () => {
        myModal.destroy();
      },
});

4. All possible modal options.

const myModal = new WebcimesModal({
      // assign a unique ID to the modal
      setId: null,
      // appy a CSS class to the modal
      setClass: null,
      // width/height
      width: 'auto', 
      height: 'auto',
      
      // html for the cancel button
      buttonCancelHtml: "Cancel", 
      // html for the confirm button
      buttonConfirmHtml: "Confirm", 
      // close the modal after clicking the cancel button
      closeOnCancelButton: true, 
      // close the modal after clicking the confirm button
      closeOnConfirmButton: true, 
      // show the close button
      showCloseButton: true, 
      // close the modal when clicking outside
      allowCloseOutside: true,
      // enable draggable
      allowMovement: true,
      moveFromHeader: true,
      moveFromBody: false,
      moveFromFooter: true, 
      // stick the modal header to the top
      stickyHeader: true, 
      // stick the modal footer to the bottom
      stickyFooter: true, 
      // additional CSS styles
      style: null, 
      // "animDropDown" or "animFadeIn"
      animationOnShow: 'animDropDown',
      // "animDropUp" or "animFadeOut"
      animationOnDestroy: 'animDropUp', 
      // duration in ms
      animationDuration: 500,
      
});

5. Callback functions.

const myModal = new WebcimesModal({
      beforeShow: () => { },
      afterShow: () => { },
      beforeDestroy: () => { },
      afterDestroy: () => { },
      onCancelButton: () => { },
      onConfirmButton: () => { },
});

Changelog:

v1.1.1 (09/18/2023)

• Add source map for js and css

v1.1.0 (09/16/2023)

• Add support for udm and esm module, and minify all scripts and css