Dockable Draggable Modal Dialog – native-window.js

Category: Modal & Popup | July 13, 2020
Author: aminejafur
Views Total: 72 views
Official Page: Go to website
Last Update: July 13, 2020
License: MIT

Preview:

Dockable Draggable Modal Dialog – native-window.js

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.css 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: () => {},
});

You Might Be Interested In:


Leave a Reply