Simple Fullscreen Modal Window In Pure JavaScript – Monolog.js

Category: Javascript , Modal & Popup | December 15, 2015
Author: soywod
Views Total: 3,314
Official Page: Go to website
Last Update: December 15, 2015
License: MIT

Preview:

Simple Fullscreen Modal Window In Pure JavaScript – Monolog.js

Description:

Monolog.js is a simple yet flexible JavaScript library for displaying a fullscreen, customizable modal window with fadeIn & fadeOut animations.

How to use it:

Include both monolog.css and monolog.js on the webpage.

<link rel="stylesheet" href="dist/monolog.css">
<script src="dist/monolog.js"></script>

Create a new modal instance with custom content.

var monolog = new Monolog({
    content: "I am a modal window"
});

Display the modal window whenever you need.

monolog.show();

More configuration options.

var monolog = new Monolog({

    // shows a loader when modal is displayed
    loader  : false,

    // The modal content. Plain text or HTML.
    content: "",

    // Display close button
    close: true,

    // callback function
    onOpening: function() {
      // do something
    },

    onOpened: function() {
      // do something
    },

    onClosing: function() {
      // do something
    },

    onClosed : function () {
      // do something
    }

});

API methods.

// Show the modal
monolog.show();

// Hide the modal
monolog.hide();

// Close the modal
monolog.close();

// Set new modal content
monolog.setContent(html)

 

You Might Be Interested In:


One thought on “Simple Fullscreen Modal Window In Pure JavaScript – Monolog.js

Leave a Reply