README

The modals.css provides a classic modal, in which you can include any content you want. In addition, the modals.js provides logic to open and close modals.

Table of Contents

• Getting started
  • Browser support
  • Import Files
• Documentation
  • Css
    • Basic Usage
    • Sizing
    • Positions
    • Animations
  • Javascript
    • Register
    • Methods
    • Events
• Credits

Getting started

Browser support

Modern browser only.

Import Files

<link href="modals.css" rel="stylesheet" type="text/css">
<script src="modals.js" type="module"></script>

Documentation

You may visit the docs.tobento.ch/css-modal page for documentation with demo.

Css

Basic Usage

The basic modal structure is:

<div class="modal">
    <div class="modal-background"></div>
    <div class="modal-content">
        <div class="modal-head">Head</div>
        <div class="modal-body">Body</div>
        <div class="modal-foot">Foot</div>
    </div>
</div>

The minimal modal structure is:

<div class="modal">
    <div class="modal-content">
        <div class="modal-body">Body</div>
    </div>
</div>

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.

<div class="modal active">
    <div class="modal-content">
        <div class="modal-body">Body</div>
    </div>
</div>

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

<div class="modal">
    <div class="modal-content modal-m">
        <div class="modal-body">Body</div>
    </div>
</div>

You may combine the following sizes:

<div class="modal">
    <div class="modal-content modal-m modal-tablet-full">
        <div class="modal-body">Body</div>
    </div>
</div>

If you are using the basis.css - Sizing you may use it too.

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

Example bottom right aligned:

<div class="modal bottom right">
    <div class="modal-content">
        <div class="modal-body">Body</div>
    </div>
</div>

Example top centered aligned:

<div class="modal top">
    <div class="modal-content">
        <div class="modal-body">Body</div>
    </div>
</div>

Animations

Available Animations:

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

Example:

<div class="modal modal-fade">
    <div class="modal-content">
        <div class="modal-body">Body</div>
    </div>
</div>

Javascript

Register

The Html markup for registering a modal is:

<!-- trigger button -->
<span class="button" data-modal-trigger="foo">Open modal</span>

<!-- related modal -->
<div class="modal" data-modal='{"id": "foo"}'>
    <div class="modal-content">
        <div class="modal-body">Body</div>
    </div>
</div>

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

<div class="modal" data-modal='{"id": "foo"}'>
    <div class="modal-background"></div>
    <div class="modal-content">
        <div class="modal-head"><span class="button modal-close">close</span></div>
        <div class="modal-body">Body</div>
        <div class="modal-foot"><span class="button modal-close">close</span></div>
    </div>
</div>

Options:

<div class="modal" data-modal='{"id": "foo", "scroll": "hidden", "closeTriggers": ".modal-close"}'>
    <div class="modal-content">
        <div class="modal-body">Body</div>
    </div>
</div>

Methods

You may import the modals module and use its methods:

<script type="module">
    import modals from "modals.js";

    document.addEventListener('DOMContentLoaded', (e) => {
        // get a modal by id:
        const modal = modals.get('ID');
        
        // open modal:
        modal.open();
        
        // close modal:
        modal.close();
        
        // you may check if a modal exists:
        if (modals.has('ID')) {
            modals.get('ID').open();
        }        
    });
</script>

Events

modals.get('ID').listen('open', (modal) => {
    modal.modalEl.querySelector('.modal-body').innerHTML = 'New Body';
});

Credits

• Tobias Strub
• All Contributors