Create Draggable Dialog Popup Window In Pure JavaScript
WindowJS is a simple JavaScript library, to create a functional popup window inside of the browser. this is fully customizable dialog windows with resize/move/maximize/minimize capabilities.
Installation
- Download the .zip-File and put it in your project-folder.
-
Add this script-tag to the head of the file
<script src="path/to/js/file.js"></script>
- Add this link-tag to the head of the file, to include the styles
<link rel="stylesheet" href="path/to/css/file.css" />
- Start using the library!
Usage
Create new window
var win = new Window("Awesome title");
NOTE: Don’t use window as variable name, because the window object already exists!
Add content to the window
win.content.innerHTML = 'Lorem ipsum dolor sit amet, consectetur ...';
Documentation
Window
It’s the main object to display the window
Instanciating
new Window(title, options);
- title (String): This string is used as the title of the window
- options (object): A object with options for the window (see below) (optional)
After instanciating the window is reloaded and shown (if not defined otherwise)
Methods
win.reload(); // Renders the window (you don't have to use this)
win.setTitle(title); // Resets the title (string)
win.getTitle(); // Returns the current title
win.getContainer(); // Returns the container of the window
win.changeOption(option, value); // Changes one option (string, object)
win.getOptions(); // Returns the options
win.changeState(state); // Sets the current state of the window: NORMAL / MAXIMIZED (WindowState)
win.getState(); // Returns the current state of the window
win.changeWindowState(window_state); // Sets the current window state: SHOWN / MINIMIZED / HIDDEN (WindowState)
win.getWindowState(); // Returns the current window state
win.normalSize(); // Normal-Sizes the window
win.isNormalSized(); // Returns true, if the window is normal-sized, otherwise false
win.maximize(); // Maximizes the window
win.isMaximized(); // Returns true, if the window is maximized, otherwise false
win.toggleMaximize(); // Toggles between normal size and maximized
win.show(); // Shows the window
win.isShown(); // Returns true, if the window is shown, otherwise false
win.minimize(); // Minimizes the window
win.isMinimized(); // Returns true, if the window is minimized, otherwise false
win.hide(); // Hides the window
win.isHidden(); // Returns true, if the window is hidden, otherwise false
win.isVisible(); // Returns true, if the window is not minimized and not hidden, otherwise false
win.isSelected(); // Returns true, if the window is selected
win.getSize(); // Returns the size of the window in pixels
win.getPosition(); // Returns the offset position of the top left corner to the parent element
win.on(event, callback); // Sets the eventlistener of the event, if the callback is specified;
// if only the event is set, it returns the callback-function; if that is not
// set, it returns a empty function (string, function)
win.removeOn(event); // Removes the eventlistener for the event, if set
win.reset(); // Resets the appearence of the window (shows it and sets its size to normal)
win.close(); // Closes the window (and disposes it, if not defined otherwise)
win.dispose(); // Disposes the window, meaning it is removed from the dom (can be re-created
// with win.reload())
Variables
Window.count // static integer, that contains the number of instanciated windows so far
Window.DISPOSE_ON_CLOSE // static variable, to set the close action (disposes the window)
Window.HIDE_ON_CLOSE // static variable, to set the close action (only hides the window)
Window.DO_NOTHING_ON_CLOSE // static variable, to set the close action (doesn't hide the window)
Window.DOUBLE_CLICK_DELAY // static int, that determins how many ms the user have for the double
// click (default: 300)
win.content // DOM-Object, that represents the content of the window (edit this!)
WindowState
A collection of states, a window can have. Can’t be instanciated.
Variables
WindowState.NORMAL
WindowState.MAXIMIZED
WindowState.MINIMIZED
WindowState.SHOWN
WindowState.HIDDE
WindowUtil
A collection of methods. Can’t be instanciated.
Methods
WindowUtil.getProperty(opt, o, def); // Returns the value of 'o' in the array/object opt, if it is set;
// else it returns def (object, string, object)
Events
It is possible to attach a event to a window: window.on(event, callback);
| Event | Callback-Parameter(s) | Definition |
|---|---|---|
| change_title | {old_title, new_title} | Is triggered, when the title is changed |
| reload | – | Is triggered, when the reload function is invoked |
| resize_start | e[MouseDownEvent] | Is triggered, when one resize-handle is clicked |
| resize_stop | e[MouseUpEvent] | Is triggered, when the resize-handle is released |
| resize | e[MouseMoveEvent] | Is triggered, when the window is resized |
| move_start | e[MouseDownEvent] | Is triggered, when the top bar is clicked once |
| move_stop | e[MouseUpEvent] | Is triggered, when the top bar is released |
| move | e[MouseMoveEvent] | Is triggered, when the window is moved |
| change_state | {old_state, new_state} | Is triggered, when the state is changed |
| change_window_state | {old_window_state, new_window_state} | Is triggered, when the window state is changed |
| update_size | {old_size, new_size} | Is triggered, when the window size changes |
| update_selected | – | Is triggered, when the window selection changes |
| select | – | Is triggered, when the window is selected |
| deselect | – | Is triggered, when the window is deselected |
| minimize | – | Is triggered, when the window is minimized |
| normalSize | – | Is triggered, when the window is normal-sized |
| maximize | – | Is triggered, when the window is maximized |
| hide | – | Is triggered, when the window is hidden |
| show | – | Is triggered, when the window is shown |
| update_position | {old_position, new_position} | Is triggered, when the window position changes |
| reset | – | Is triggered, when the reset function is invoked |
| closing | – | Is triggered, before the window is closed; if the callback return false, the window is not closed |
| closed | – | Is triggered, when the window is closed |
| disposing | – | Is triggered, before the window is disposing; if the callback return false, the window is not disposed |
| disposed | – | Is triggered, when the window is disposed |
| init | – | Is triggered, when the window is initialized for the first time |
| maximizing | – | Is triggered, before the window is maximized; if the callback returns false, the window is not maximized |
| minimizing | – | Is triggered, before the window is minimized; if the callback return false, the window is not minimized |
Options
| Option | Values | Definition |
|---|---|---|
| icon | [string] | Sets the icon of the window (top-left) |
| minimize_icon | [string] | Sets the minimize icon |
| maximize_icon | [string] | Sets the icon, that is displayed, when the window is not maximized |
| normalsize_icon | [string] | Sets the icon, that is displayed, when the window is maximized |
| close_icon | [string] | Sets the close icon |
| size | {width: [int], height: [int]} | Sets the size of the window (def: {width: 200, height: 150}) |
| position | {x: [int], y: [int]} | Sets the position, relative to the parent (def: center of the parent) |
| selected | true/false | Defines, whether it is selected or not (styled differently) (def: false) |
| min_size | {width: [int], height: [int]} | Sets the minimum size, the window can have (def: {width: 200, height: 150}) |
| max_size | {width: [int], height: [int]} | Sets the maximum size, the window can have (def: {}) |
| events | {[string]: [function], […]} | Sets the events for the window (if a event is set before, it gets overwritten) |
| bar_visible | true/false | Defines, whether the top bar (with title, …) is visible or not (def: true) |
| resizable | true/false | Defines, whether the window is resizable or not (def: true) |
| movable | true/false | Defines, whether the window is movable or not (def: true) |
| maximizable | true/false | Defines, whether the window is maximizable or not (def: true) |
| minimizable | true/false | Defines, whether the window is minimizable or not (def: true) |
| always_on_top | true/false | Sets, if the window is always in front of the other windows (def: false) |
| container | [DOM-Object] | If this is set, the parent of the window is set to that (def: document.body) |
| window_state | [WindowState] | Sets the state of the window: SHOWN, MINIMIZED, HIDDEN (def: SHOWN) |
| close_action | Window.DISPOSE_ON_CLOSE Window.HIDE_ON_CLOSE Window.DO_NOTHING_ON_CLOSE | Defines, what happens, when the window is beeing closed (def: Window.DISPOSE_ON_CLOSE) |
Example
Code:
var win = new Window("Title", {
state: WindowState.NORMAL,
size: {
width: 500,
height: 250
},
selected: true,
});
win.content.style.padding = "5px";
win.content.style.textAlign = "justify";
win.content.innerHTML = 'Lorem ipsum dolor sit amet, [...]';
See live demo and download source code.
Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.
This awesome script developed by m-thalmann. Visit their official repository for more information and follow for future updates.
