Author: | GStaehler |
---|---|
Views Total: | 7,445 views |
Official Page: | Go to website |
Last Update: | January 24, 2020 |
License: | MIT |
Preview:

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">×</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">×</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
The download script dose not work, but the demo works well. Could you update the download code?
Download the zip and you will find a working demo in the EXAMPLE folder.