Daily Archives: September 23, 2020

JavaScript/CSS/HTML || Modal.js – Simple Modal Dialog Prompt Using Vanilla JavaScript

The following is a module which allows for a simple modal popup dialog panel in vanilla JavaScript. This module allows for custom Yes/No prompts.

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. Available Options
3. Alert Dialog
4. Yes/No Dialog
5. Custom Buttons
6. Dialog Instance
7. Modal.js & CSS Source
8. More Examples

1. Basic Usage

Syntax is very straightforward. The following demonstrates adding a simple dialog to the page.


Sample:

Sample

The following example demonstrates how to add click events to the default dialog buttons. The ordering of the buttons on initialization defines its placement on the dialog.


2. Available Options

The options supplied to the ‘Modal.showDialog‘ function is an object that is made up of the following properties.

Supplying different options to ‘Modal.showDialog‘ can change its appearance. The following examples below demonstrate this.


3. Alert Dialog

The following example demonstrates an alert dialog.


Sample:

Sample


4. Yes/No Dialog

The following example demonstrates a yes/no dialog.


Sample:

Sample


5. Custom Buttons

The following example demonstrates multiple custom buttons.


Sample:

Sample


6. Dialog Instance

The following example demonstrates how to use the dialog instance to show and hide when needed.


7. Modal.js & CSS Source

Modal.js & CSS Source


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