Versatile Dialog/Modal/Notification Library – Windowise

Preview:

Description:

The Windowise JavaScript library offers a comprehensive solution for managing various types of UI elements, such as push notifications, modal windows, popup boxes, and toast messages. With its intuitive API and Promise support, It enables smooth handling of user interactions, ensuring your website communicates effectively and professionally.

How to use it:

1. Include the Windowise’s JavaScript and Stylesheet on the page.

<link rel="stylesheet" href="windowise.min.css" />
<script src="windowise.min.js"></script>

2. Create a dialog window that loads content directly from within the document.

<div id="dialog" hidden>
  ... your content here ...
</div>

var Wwise = Windowise;
var Window = Windowise.Window;
var Modal = Windowise.Modal;
var Nft = Windowise.Nft;
var Push = Windowise.Push;
var Progress = Windowise.Progress;
var Input = Windowise.Input;
var instance = Window.create(
    document.getElementById('dialog'),
    {
      // all default options
      animation: 'pop',
      topbar: {
        showClose: true,
        showMin: false
      },
      keepOverlay: false,
      position: 'center',
      overlay: false,
      clickOverlayToClose: true,
      removeBackground: false,
      noRadius: false,
      zIndex: null
    }
);
// Open the dialog
instance.open();

3. Create modal windows.

var Wwise = Windowise;
var Window = Windowise.Window;
var Modal = Windowise.Modal;
var Nft = Windowise.Nft;
var Push = Windowise.Push;
var Progress = Windowise.Progress;
var Input = Windowise.Input;
var instance = new Modal({
    // notificaiton type:
    // ok, error, info, caution, min, and close
    type: 'ok'
    title: 'Modal Title',
    text: 'Modal Text',
    content: 'Modal Content',
    buttons: [
      // add action buttons here
      {
        id: 'no',
        key: 27,
        text: 'No',
        normal: true
      },
      {
        id: 'yes',
        key: 13,
        text: 'Yes'
      },
    ],
    animation: 'pop',
    topbar: {
      showClose: true,
      showMin: false
    },
    keepOverlay: false,
    overlay: false,
    clickOverlayToClose: true,
    zIndex: null
});
// Open the modal
instance.open();

4. Create toast-like notifications.

var Wwise = Windowise;
var Window = Windowise.Window;
var Modal = Windowise.Modal;
var Nft = Windowise.Nft;
var Push = Windowise.Push;
var Progress = Windowise.Progress;
var Input = Windowise.Input;
var instance = new Nft({
    // notificaiton type:
    // ok, error, info, caution, min, and close
    type: 'ok',
    content: 'Toast Message Here',
    animation: 'right',
    position: 'right top',
    showClose: true,
    clickToClose: false,
    closeAfter: null,
    topbar: {
      showClose: true,
      showMin: false
    },
    style: null,
    removeBackground: false,
    margin: '10px 15px',
    zIndex: null
});
// Open the notification
instance.open();

5. Create push notifications (notification bars).

var Wwise = Windowise;
var Window = Windowise.Window;
var Modal = Windowise.Modal;
var Nft = Windowise.Nft;
var Push = Windowise.Push;
var Progress = Windowise.Progress;
var Input = Windowise.Input;
var instance = new Push({
    // notificaiton type:
    // ok, error, info, caution, min, and close
    type: 'ok'
    textAlign: 'center',
    clickToClose: false,
    closeAfter: null,
    buttons: [],
    position: 'top',
    overlay: false,
    clickOverlayToClose: false,
    style: null,
    zIndex: null,
});
// Open the push notification
instance.open();
// Primise
instance.getPromise().then(function(value) {
  // ...
});