Lightweight Draggable Popup Window In Vanilla JavaScript – Window Engine

Window Engine is a zero-dependency JavaScript library to create nice clean mobile-friendly popup windows that are moveable via mouse drag and touch events.

How to use it:

Download and place the Window Engine’s files in the document.

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

Create the HTML for the popup windows.

<div id="mydiv1" class="mydiv" style="display: initial;">
  <div id="mydiv1header" class="mydivheader purple">
    <p class="windowTitle">Window Engine</p>
    <b id="closeButton1">&times;</b>
  </div>
  <div class="mainWindow">
    <p>Window 1</p>
  </div>
</div>
<div id="mydiv2" class="mydiv">
  <div id="mydiv2header" class="mydivheader cyan">
    <p class="windowTitle">Window 2</p>
    <b id="closeButton2">&times;</b>
  </div>
  <div class="mainWindow"></div>
</div>

Optionally you can create toggle buttons to show the popup windows again after closed.

<span id="button1">1</span>
<span id="button2">2</span>

Add a fade effect to the window.

<div id="mydiv2" class="mydiv fade">
  ...
</div>

Display the window on page load.

<div id="mydiv2" class="mydiv" style="display: initial;">
  ...
</div>

Change the size of the window.

<div id="mydiv2" class="mydiv large">
  ...
</div>
<div id="mydiv2" class="mydiv normal">
  ...
</div>
<div id="mydiv2" class="mydiv small">
  ...
</div>

Changelog:

01/24/2020

• Delete useless code and limit dom interactions

v4.3.3 (12/23/2019)

• Cleanup

v4.3.2 (12/17/2019)

•   Improve API, no need to set an id to header

v4.3 (12/12/2019)

• Refactor

v4.2.1 (12/06/2019)

• On opening a window, if it is already open, the window is the active one

10/25/2019

• Refactor code

10/08/2019

• Remove duplicated code

10/07/2019

• Cleanup

v4.1 (10/04/2019)

• Refactor

09/04/2019

• Remove useless code

v4.0.0 (09/03/2019)

• touch friendly

v3.2.1 (08/30/2019)

• cleanup

v3.2 (08/30/2019)

• Automatised window creation, style cleaned, refactored

08/29/2019

• Improved API