Dockable Modal Window In Vanilla JavaScript – dockModal.js

Preview:

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