Press "Enter" to skip to content

A Simple JavaScript Library To Display A Window Inside The Browser | WindowJS

WindowJS is a simple JavaScript library, to display a functional window inside the browser, this js library creates responsive and fully customizable dialog windows with resizing / move/zoom in / zoom out capabilities.

How to make use of it:

Load the minified model of the WindowJS’ information within the HTML web page.

<link rel="stylesheet" href="window.css">
<script src="window.js"></script>

Create a brand new dialog window occasion.

const win = new Window("Dialog Title", {
      // options here
});

Insert content material to the dialog window.

win.content.innerHTML = '<p>Dialog Window Here</p>';

Assign a singular ID to the dialog content.

win.content.id = "myContent";

Apply customized styles to the dialog window.

win.content.style.styleName = "value";

API strategies.

// reloads the modal
win.reload();

// sets the title
win.setTitle(title);

// gets the current title
win.getTitle();

// gets the container
win.getContainer();

// changes the options
win.changeOption(option, value);

// gets the options
win.getOptions();

// changes the current state
// NORMAL / MAXIMIZED
win.changeState(state);

// gets the current state
win.getState();

// changes the dialog state
// HOWN / MINIMIZED / HIDDEN (WindowState)
win.changeWindowState(window_state);

// gets the current dialog state
win.getWindowState();

// normalizes the dialog
win.normalSize();      

// checks if is normalized
win.isNormalSized();

// maximizes the window
win.maximize();

// checks if is maximized
win.isMaximized(); 

// toggles between normal size and maximized
win.toggleMaximize();

// shows the dialog
win.show();

// checks if is shown
win.isShown();

// minimizes the dialog
win.minimize();

// checks if is minimized
win.isMinimized();

// hides the dialog
win.hide();

// checks if is hidden
win.isHidden(); 

// checks if the window is selected
win.isVisible(); 

// checks if is visible
win.isSelected();

// gets the size of the dialog
win.getSize();

// gets the position of the dialog
win.getPosition(); 

// event listeners
win.on(event, callback); 
                                  
// removes the event listener
win.removeOn(event); 

// resets the dialog
win.reset();

// closes the dialog
win.close(); 

// destroy the dialog
win.dispose();

Draggable & Maximizable Dialog Window, WindowJS Plugin/Github


See Demo And Download

Official Website(m-thalmann): Click Here

This superior jQuery/javascript plugin is developed by m-thalmann. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *