Lightweight Draggable Popup Window In Vanilla JavaScript – Window Engine

Preview:

Description:

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

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>