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

Category: Javascript , Modal & Popup , Notification , Recommended | January 8, 2019
Author: riversun
Views Total: 774
Official Page: Go to website
Last Update: January 8, 2019
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) = {}
      
});

You Might Be Interested In:


Leave a Reply