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();
win.setTitle(title);
win.getTitle();
win.getContainer();
win.changeOption(option, value);
win.getOptions();
win.changeState(state);
win.getState();
win.changeWindowState(window_state);
win.getWindowState();
win.normalSize();
win.isNormalSized();
win.maximize();
win.isMaximized();
win.toggleMaximize();
win.show();
win.isShown();
win.minimize();
win.isMinimized();
win.hide();
win.isHidden();
win.isVisible();
win.isSelected();
win.getSize();
win.getPosition();
win.on(event, callback); // Sets the eventlistener of the event, if the callback is specified;
win.removeOn(event);
win.reset();
win.close();
win.dispose();
Variables
Window.count
Window.DISPOSE_ON_CLOSE
Window.HIDE_ON_CLOSE
Window.DO_NOTHING_ON_CLOSE
Window.DOUBLE_CLICK_DELAY
win.content
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;
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.