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.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

Star-Rating-JavaScript

Select Box Based Star Rating JavaScript Library | star-rating.js

star-rating.js is a small JavaScript library to create a customizable and gradually improved star rating control from a regular tick box with numeric values. The ES6 module…

Bootstrap-Show-Notification

Corner Fixed Notifications Alerts With Bootstrap | BS4 Show Notification

Bootstrap Notification is an easy-to-use jQuery plugin that uses the Bootstrap Alerts component to create static, rejectable, and stackable notification popups in the upper right corner of the…

Stackable-Multi-level-Sidebar-Menu

Create Stackable Multi-level Sidebar Menu | HC Off-canvas Nav

Multi-Level Sidebar Slide Menu – HC MobileNav is a jQuery plugin for creating multi-level, mobile-first, totally accessible, off-canvas facet navigation that helps the infinite nesting of submenu…

vue-masonry-gallery

Responsive Masonry Layout with SSR Support for Vue 3 | vue-masonry-wall

Vue masonry wall is a responsive masonry layout component for Vue 3 to deliver a Masonry-style responsive grid layout with SSR and RTL layout support. Features 📱…

bootstrap-5-bs-toaster

A Bootstrap 5 Toast Notification Framework Library | bs-toaster

bs-toaster is simple to instantiate bs-toaster and create multiple toasts effortlessly using native Bootstrap 5! Feature Facts Small and clean Modern browser support. No IE sorry 💥…