Dockable Draggable Modal Dialog – native-window.js

Preview:

Description:

native-window.js is a standalone JavaScript dialog box library to create dockable, draggable, resizable, minimizable/maximizable modal windows on the webpage just like a web desk.

How to use it:

1. Insert the core JavaScript native-window.js and Stylesheet native-window.css in the HTML file.

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

2. Create a basic Native Window and load content from an external link.

createNewWindow({
  Title: "Dialog Title",
  Link: "external.html"
});

3. Or embed any HTML content to the Native Window.

createNewWindow({
  Title: "Dialog Title",
  Html: "HTML Code Here"
});

4. Customize the appearance of the Native Window.

createNewWindow({
  
  // title font size
  TitleSize: 15,
  // text shadow
  TitleTextShadow: "rgb(74, 66, 66) 0px 0px 3px",
  // text color
  TitleTextColor: "rgb(255, 255, 255)", 
  // width/height
  Width: 600,
  Height: 300,
  // top offset
  Top: 50,
  // left position
  Left: 50, 
  // top banner background
  BannerBackground: "-webkit-linear-gradient(top, rgb(67, 78, 95), rgb(37, 46, 78))",
  // window shadow
  WindowShadow: "hsla(0, 0%, 0%, 0.8) 0px 0px 25px 0px", 
  // window background
  WindowBackground: "rgba(44, 53, 67, 0.73)",
  // border radius
  WindowRaduis: "3px",
  // is resizable?
  ResizeEnable: true,
  // is draggable?
  DragEnable: true,
  // is maximizable?
  ButtonFull: true,
  // customize icons here
  iconizeIcon: "icons/iconize.svg",
  normalizeIcon: "icons/normalize.svg",
  maximizeIcon: "icons/maximize.svg",
  closeIcon: "icons/close.svg"
});

5. Execute callback functions before/after building the Native Window.

createNewWindow({
  callbackBefore: () => {},
  callbackAfter: () => {},
});