Dockable Modal Window with dockModal.js

Create dockable dialog and modal windows by using dockModal.js javascript library.

Preview

Demo Download

Author:	Bogdan-Lyashenko
Official Page:	Go to website
License:	MIT

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="https://use.fontawesome.com/releases/v5.15.0/css/all.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,
});

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

January 03, 2022 Tags : javascript , Modal & Popup