A Simple Overlay Modal Dialog Using JavaScript | overlayJS

Modal-Dialog-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.

overlay.content.appendChild(Content);

Set the types of 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
})

Events

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

EventDefinition
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

Options

OptionValuesDefinition
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.

Share