Toast/Popup/Modal/Dialog JavaScript Library – JSFrame.js

Category: Javascript , Modal & Popup , Notification , Recommended | April 30, 2020
Author: riversun
Views Total: 1,073
Official Page: Go to website
Last Update: April 30, 2020
License: MIT

Preview:

Toast/Popup/Modal/Dialog JavaScript Library – JSFrame.js

Description:

JSFrame.js is a multifunctional JavaScript library used for creating floating windows, modal popups, and even toast notifications with custom styles.

More features:

  • Easy to style using your own CSS.
  • Resizable and draggable.
  • Support HTML and iFrame content.

Basic usage:

Install & download.

# NPM
$ npm install jsframe.js --save

Import the ‘jsframe.js’ into your document.

<script src="/path/to/jsframe.js"></script>

Create a new jsframe instance.

const myWindow = new JSFrame();

Create a popup window with the following parameters:

const myPopup = myWindow.create({

      // unique name
      name: 'my-window-name',

      // window title
      title: 'Window0',

      // position
      left: 20,
      top: 20,

      // width/height
      width: 320,
      height: 220,

      // min width/height
      minWidth: 160,
      minHeight: 100,

      // enable draggable
      movable: true,

      // enable resizable
      resizable: true,
 
      // custom styles
      style: {
        backgroundColor: 'rgba(220,220,220,0.8)',
        overflow: 'auto',
      },

      // HTML content to present
      html: 'Contents',

      // or iframe content
      url: 'content01.html',

      // callback
      urlLoaded: (frame) = {}
      
});

Changelog:

v1.6.0 (04/30/2020)

  • Make it easy to use the childMenu when it is displayed when a frame component is clicked.
  • Fixed If there are multiple frame components with childmenu, the correct childmenu will not be opened when the frame component is clicked.
  • Use event-listener-helper instead of listeners starting with “on” like “onclick” to limit the eventListener to one.

v1.6.0 (04/27/2020)

  • Supports cloning with arguments in the buildImageButtonAppearance method call.

v1.5.16 (03/07/2020)

  • remove unneeded dependencies

v1.5.15 (03/06/2020)

  • fix vulnerability of building tools

You Might Be Interested In:


Leave a Reply