Smooth Overlay Modal Dialog In Pure JavaScript – overlayJS

overlayJS is a dynamic, animated modal & dialog written in JavaScript that enables you to open/close the popup and insert content programmatically.

How to use it:

Link to overlayJS’ JavaScript and Stylesheet.

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

Create a new overlay instance.

var overlay = new Overlay();

Append content to the modal dialog.

overlay.content.appendChild(Content);

Set the styles of the content.

overlay.content.style.textAlign = "center";

Display the modal dialog.

overlay.open()

Close the modal dialog.

overlay.close()

Reset the content of the modal dialog.

overlay.reset()

Determine if the modal dialog is opened.

// returns true if is opened
overlay.isOpened();

Event handlers.

overlay.on('opening', function(){
  // when opening
})
overlay.on('open', function(){
  // when is opened
})
overlay.on('closing', function(){
  // when closing
})
overlay.on('close', function(){
  // when is closed
})

Changelog:

09/20/2020

• Fixed scrollbar on opened overlay

10/16/2018

• Update overlay.js