Author: | aminejafur |
---|---|
Views Total: | 570 views |
Official Page: | Go to website |
Last Update: | July 13, 2020 |
License: | MIT |
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: () => {}, });
Hi,
Thanks for sharing, just a little notice,
**
Insert the core JavaScript “native-window.css” -> “native-window.js”.
**