Simple Fullscreen Modal Window In Pure JavaScript – Monolog.js

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)