Press "Enter" to skip to content

A Simple Overlay Modal Dialog Using JavaScript | overlayJS

OverlayJS is a simple JavaScript library for displaying overlays. Overlay JS is an animated, dynamic form and dialogue written in JS that enables you to open/close a popup and insert content programmatically.

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
})

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 Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *