Dockable Modal Window In Vanilla JavaScript – dockModal.js

Category: Javascript , Modal & Popup | March 27, 2022
Author:reimax
Views Total:219 views
Official Page:Go to website
Last Update:March 27, 2022
License:MIT

Preview:

Dockable Modal Window In Vanilla JavaScript – dockModal.js

Description:

dockModal.js is a JavaScript library for creating dialog boxes and modal windows that are dockable, minimizable, and maximizable.

Features:

  • Click the title bar to dock & undock the dialog.
  • Click the Expand icon to maximize the dialog just like a fullscreen modal.

How to use it:

1. Load the dockModal.js and dockModal.css in the document.

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

2. Load the Font Awesome iconic font for the controls.

<link rel="stylesheet" href="/path/to/font-awesome/all.min.css" />

3. Create a basic dock modal.

<div class="dock_modal_demo" data-title="Modal Title 1">    
  Modal Content
</div>
dockModal(document.querySelector(".dock_modal_demo"), {
  title: function() {
    return document.querySelector(".dock_modal_demo").getAttribute("data-title");
  },
});

4. Set the initial state: “modal” (default), “docked”, “minimized”.

dockModal(document.querySelector(".dock_modal_demo"), {
  initialState: 'docked'
});

5. Customize the appearance of the dock modal.

dockModal(document.querySelector(".dock_modal_demo"), {
  width: 400,
  height: "65%",
  minimizedWidth: 200,
  gutter: 40,
  poppedOutDistance: "6%",
  class: "",
  animationSpeed: 400,
  showPopout: true,
  showMinimize: true,
  showClose: false,
  minWidth: 150,
  minGutter: 20,
});

6. Callback functions.

dockModal(document.querySelector(".dock_modal_demo"), {
  beforeCreate: undefined,
  create: undefined,
  open: undefined,
  beforeClose: undefined,
  close: undefined,
  beforeMinimize: undefined,
  minimize: undefined,
  beforeRestore: undefined,
  restore: undefined,
  beforePopout: undefined,
  popout: undefined
});

Changelog:

03/27/2022

  • Added options for displaying modals on mobile devices

You Might Be Interested In:


Leave a Reply