Daily Archives: September 4, 2020

JavaScript/CSS/HTML || Modal.js – Simple Modal Popup Panel Using Vanilla JavaScript

The following is a module which allows for a simple modal popup panel in vanilla JavaScript. Options include allowing the modal to be dragged, resized, and closed on outer area click.

Modal drag and resize supports touch (mobile) input.

Modal.js & CSS Source

Contents

1. Basic Usage
2. Modal HTML
3. Initialize Modal Options
4. Modal Dialog
5. Modal.js & CSS Source
6. More Examples

1. Basic Usage

Syntax is very straightforward. The following demonstrates showing and hiding a modal popup.

Modal.show‘ and ‘Modal.hide‘ accepts either a string selector or a Javascript element.


2. Modal HTML

The following is the HTML used to display the modal. The attributes supplied to the ‘modal’ element specifies whether it is allowed to be dragged, resized, or closed on outer area click.

Sample:

Sample


3. Initialize Modal Options

In order for the options on the modal to take effect, it needs to be initialized.

The following example demonstrates initializing the modal popup options.

Note: ‘Modal.init‘ only needs to be called once. It will initialize all modals on the page.


4. Modal Dialog

The following demonstrates adding a simple dialog to the page.

For more options, click here!


Sample:

Sample


5. Modal.js & CSS Source

The following is the Modal.js Namespace & CSS Source. Include this in your project to start using!

The following is Modal.css.


6. More Examples

Below are more example demonstrating the use of ‘Modal.js‘. Don’t forget to include the module when running the examples!

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.