A Simple Overlay Modal Dialog Using JavaScript | overlayJS


OverlayJS is a simple JavaScript library for displaying overlay’s dynamic form and dialogue written in JS that enables you to open/close a popup and insert content.

javascript modal popup, open modal popup using jquery on button click, how to create popup in html with css, css modal popup, bootstrap modal popup, javascript popup window onclick

How to make use of 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.


Set the types of content.

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

Display the modal dialog.


Close the modal dialog.


Reset the content of the modal dialog.


Determine if the modal dialog is opened.

// returns true if is opened

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


It is possible to attach an event to an overlay: overlay.on(event, callback);

openingIs triggered, before the overlay is opened; if the callback returns false, the overlay is not opened
openIs triggered, after the overlay is opened
closingIs triggered, before the overlay is closed; if the callback returns false, the overlay is not closed
closeIs triggered, after the overlay is closed


closabletrue/falseDefines, if the overlay is closable by the user
openedtrue/falseDefines, if the overlay is opened on creation, or not

Smooth Overlay Modal Dialog, automatic modal popup, Overlay JS Plugin/Github, jquery modal popup, modal popup in html

See Demo And Download

Official Website(m-thalmann): Click Here

This superior jQuery/javascript plugin is developed by m-thalmann. For extra Advanced Usage, please go to the official website.