Draggable Resizable Modal Window Component

Preview:

Description:

A modal web component to help you create customizable, draggable, resizable, maximizable modal windows in web applications.

It is highly customizable, easy and simple to use, and requires no dependencies.

How to use it:

1. Download and import the modal component.

// ES module
import 'path/to/modal-win-component.min';
// Browser
<script src="/path/to/modal-win-component.min.js"></script>

2. Add your modal content to the <modal-win&gt; component.

<modal-win>
  <div slot="modal-main-content">
    Modal Body
  </div>
  <div slot="modal-footer-content">
    Modal Footer
  </div>
</modal-win>

3. Customize the modal window using the following props.

• caption: Modal title
• moveable: Enable moveable
• resizable: Enable resizable
• maximize: Enable maximizable
• id: Unique ID.

<modal-win caption="Modal Tigle" moveable="true" maximize="true" resizable="true" id="example">
  <div slot="modal-main-content">
    Modal Body
  </div>
  <div slot="modal-footer-content">
    Modal Footer
  </div>
</modal-win>

4. Lanuch the modal window.

document.getElementById('example').show()

5. Customize the appearance of the modal window.

modal-win#example {
  --main-mw-width: 500px;
  --main-mw-height: 300px;
  --main-mw-overlay-bg: rgba(0, 0, 0, 0.3);
  --main-mw-border-size: 1px;
  --main-mw-border-radius: 6px;
  --main-mw-bg-color: none;
  --main-mw-border-color: rgba(231, 231, 231, 0.3);
  --main-mw-box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  /* modal header */
  --main-mw-header-height: 48px;
  --main-mw-header-bg-color: rgba(49, 139, 143, 0.9);
  --main-mw-header-color: #c4f3ef;
  --main-mw-header-border-bottom-color: #c4f3ef;
  --main-mw-header-title-color: #c4f3ef;
  /* modal icons */
  --main-mw-icons-font-size: 1.1em;
  --main-mw-icons-font-weight: 400;
  --main-mw-icon-min-max-color: #ccc;
  --main-mw-icon-close-color: rgb(85, 85, 83);
  /* modal footer */
  --main-mw-footer-height: 48px;
  --main-mw-footer-padding-left-right: 16px;
  --main-mw-footer-color: #e7e7e7;
  --main-mw-footer-bg-color: rgba(49, 139, 143, 0.9);
  --main-mw-footer-border-top-color: #c4f3ef;
  /* modal body */
  --main-mw-body-font-size: 0.9em;
  --main-mw-body-letter-spacing: 2px;
  --main-mw-body-padding-left-right: 16px;
  --main-mw-body-padding-top-bottom: 10px;
  --main-mw-body-bg-color: #f7f7f7;
  --main-mw-body-color: #777;
  /* scrolling */
  --main-mw-scrollbar-track-color: #eee;
  --main-mw-scrollbar-color: rgb(180, 194, 181);
  --main-mw-scrollbar-size: 0.35rem;
  --main-mw-scrollbar-minlength: 1.5rem;
}

6. Hide the modal window on page load.

modal-win:not(:defined) {
  display: none;
}