Lightweight Draggable Popup Window In Vanilla JavaScript – Window Engine

Category: Javascript , Modal & Popup | January 24, 2020
Author:GStaehler
Views Total:7,445 views
Official Page:Go to website
Last Update:January 24, 2020
License:MIT

Preview:

Lightweight Draggable Popup Window In Vanilla JavaScript – Window Engine

Description:

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

You Might Be Interested In:


2 thoughts on “Lightweight Draggable Popup Window In Vanilla JavaScript – Window Engine

  1. Herrick

    The download script dose not work, but the demo works well. Could you update the download code?

    Reply

Leave a Reply