Draggable Resizable Modal Window Component

Category: Javascript , Modal & Popup | March 9, 2023
Author:amaterasusan
Views Total:252 views
Official Page:Go to website
Last Update:March 9, 2023
License:MIT

Preview:

Draggable Resizable Modal Window Component

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;
}

You Might Be Interested In:


Leave a Reply