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.

Draggable Dialog Popup Window In Pure JavaScript

Installation

  1. Download the .zip-File and put it in your project-folder.

  2. Add this script-tag to the head of the file

<script src="path/to/js/file.js"></script>
  1. Add this link-tag to the head of the file, to include the styles
<link rel="stylesheet" href="path/to/css/file.css" />

  1. 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.