Lightweight Draggable Modal Window – FrostifyModal.js

Preview:

Description:

FrostifyModal.js is a JavaScript library that allows you to dynamically create a draggable modal window from inline elements or directly in JavaScript.

How to use it:

1. Import the JavaScript FrostModals.min.js and Stylesheet FrostModals.min.css.

<link rel="stylesheet" href="css/FrostModals.min.css" />
<script src="js/FrostModals.min.js"></script>

2. Enable a trigger element to toggle a modal window that loads content from an inline element within the document.

<button data-modal="example" data-modal-title="Modal Title">
  Launch Modal
</button>

<div class="fmodal-static" id="example">
  Example Content Here
</div>

3. Create a modal window directly in JavaScript.

FrostifyModal.set({
  title: 'Modal Title',
  content: 'Modal Content',
  // more options here
})
// show the modal window
.show();

4. All possible options.

FrostifyModal.set({
  title: 'Modal Title',
  content: 'Modal Content',
  isClosable: true,
  isDraggable: true,
  reverseButtons: false,
  labels: {
    ok: 'Okey',
    cancel: 'Cancel'
  },
  // callbacks
  onok: () => {},
  oncancel: () => {},
})

5. Apply additional CSS styles to the modal window.

FrostifyModal.set({
  containerStyles: {
    // CSS Styles here
  },
  headerStyles: {
    // CSS Styles here
  },
  bodyStyles: {
    // CSS Styles here
  }
  footerStyles: {
    // CSS Styles here
  },
  buttonsStyles: {
    // CSS Styles here
  },
})