Material & macOS Style Dialog Window In JavaScript – VtWindow

Category: Javascript , Modal & Popup | September 24, 2018
Views Total:1,976 views
Official Page:Go to website
Last Update:September 24, 2018
License:Apache 2.0


Material & macOS Style Dialog Window In JavaScript – VtWindow


VtWindow (Virtual Windows) is a JavaScript plugin to display web content in Google Material or macOS style dialog windows with drag, resize, fullscreen, maximize, close capabilities.

How to use it:

Load the core stylesheet and theme CSS of your choice in the HTML.

<link rel="stylesheet" href="vtwindow.css">
<link rel="stylesheet" href="vtwindow-theme.material.css">
<link rel="stylesheet" href="vtwindow-theme.osx.css">

Load the Material icons for the Material windows.

<link href="" rel="stylesheet">

Load the JavaScript ‘vtwindow.js’ at the end of the HTML page.

<script src="vtwindow.js"></script>

Create the templates for the dialog windows.

<template id="m">
  <div role="dialog" aria-label="" class="vt-window-material">
      <div name="header" class="valign-wrapper deep-purple">
          <span name="title">${content.title}</span>
          <span name="controls">
              <button name="popout" class="btn-flat" title="Deattatch"><i class="material-icons">launch</i></button>
              <button name="minimize" class="btn-flat" title="Minimize"><i class="material-icons">remove</i></button>
              <button name="maximize" class="btn-flat" title="Maximize"><i class="material-icons">zoom_out_map</i></button>
              <button name="close" class="btn-flat" title="Close"><i class="material-icons">close</i></button>
      <div name="body">
          <input type="text">
      <div name="footer">
          <div name="grab"></div>
<template id="osx">
  <div role="dialog" aria-label="" class="vt-window-osx">
      <div name="header" class="">
          <span name="title">${content.title}</span>
          <span name="controls">
              <button name="close" class="" title="Close"></button>
              <button name="minimize" class="" title="Minimize"></button>
              <button name="maximize" class="" title="Maximize"></button>
              <button name="popout" class="" title="Deattatch"></button>
      <div name="body">
          <input type="text">
      <div name="footer">
          <div name="grab"></div>

Create a new Virtual Window and specify the template you want to use.

// VtWindow(content, options)
var macOS = new VtWindow(null, { 
    template: osx.innerHTML
var googleMaterial = new VtWindow({ 
      title: 'Material Window', 
      body: '<div style="padding: 10px; text-align: center; width: 100%;"><h4>Hello World!</h4></div>' 
    }, { 
      template: m.innerHTML

All default options to customize the virtual window.

var options = {
    // top position
    top: 10,
    // left position
    left: 10,
    // width
    width: 400,
    // height
    height: 300,
    // enable/disable
    closable: true,
    maximizable: true,
    minimizable: true,
    deatachable: false, //needs polishing
    resizable: true,
    // preserve window order after focusing (disable if you need to use iframes inside windows)
    preserveFocusOrder: true, 
    // mount on new
    autoMount: false, 
    // Turn on optimazations for low end devices
    lowEnd: false,
    // Where the window should be mounted to (cannot be changed after instantiation)
    container: document.body,
    // Template used to construct the window
    template: /*html*/`
      <div role="dialog" aria-label="">
        <div name="header">
          <span name="title"><!-- title --></span>
          <span name="controls">
            <button name="popout">^</button>
            <button name="maximize">+</button>
            <button name="minimize">_</button>
            <button name="close">x</button>
        <div name="body">
          <!-- body -->
        <div name="footer">
          <div name="grab"></div>

Callback functions.

var options = {
    onMinimize: null,
    onMaximize: null,
    onMount: null,
    onUnmount: null,
    onShow: null,
    onHide: null,
    onPopout: null,
    onExitPopout: null,
    onFocus: null,
    onBlur: null,

API methods.

myInstance.setBody(`<div style="padding: 10px; text-align: center; width: 100%;"><h4>Hello World!</h4><p>Try the manipulating the <var>myInstance</var> object on console</p></div>`); = 220;
myInstance.left = 220;
myInstance.width = 374;
myInstance.height = 206;
myInstance.closable = false;



  • JS update

You Might Be Interested In:

Leave a Reply