Lightweight Draggable Popup Window In Vanilla JavaScript – Window Engine

Category: Javascript , Modal & Popup | January 24, 2020
Views Total:5,629 views
Official Page:Go to website
Last Update:January 24, 2020


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 class="mainWindow">
    <p>Window 1</p>
<div id="mydiv2" class="mydiv">
  <div id="mydiv2header" class="mydivheader cyan">
    <p class="windowTitle">Window 2</p>
    <b id="closeButton2">&times;</b>
  <div class="mainWindow"></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">

Display the window on page load.

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

Change the size of the window.

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



  • 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


  • Refactor code


  • Remove duplicated code


  • Cleanup

v4.1 (10/04/2019)

  • Refactor


  • 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


  • 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?


Leave a Reply