Modal

A classic modal, in which you can include any content you want.

github.com/tobento-ch/css-modal

Import Files

Css

Basic Usage

The basic modal structure is:

The minimal modal structure is:

To activate the modal, just add the .active class on the .modal container. The provided modal.js file implements the logic to open, close and animate the modals.

Sizing

By default, the modal has full width size. You may apply one of the following sizes:

• modal-s is of width 16rem
• modal-m is of width 32rem
• modal-l is of width 64rem
• modal-full is full width and height
• modal-tablet-full is full width and height on tablets and mobile
• modal-mobile-full is full width and height on mobile

Resize the window to see the full modal view.

The body gets scrollable if you have a lot of content.

Positions

By default, the modal is horizontal and vertical centered. You may combine the horizontal and vertical classes.

Modal Horizontal Alignment:

• left
• right

Modal Vertical Alignment:

• top
• bottom

Animations

Available Animations:

• modal-fade
• modal-scale
• modal-swing

JavaScript

Register

The Html markup for registering a modal is:

You may add the modal-close class to any tag for closing the modal:

Options:

Methods

You may import the modals module and use its methods:

Events