Author: | WebCimes |
---|---|
Views Total: | 141 views |
Official Page: | Go to website |
Last Update: | April 25, 2023 |
License: | MIT |
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";
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: () => { }, });