PHPackages                             tobento/css-modal - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. tobento/css-modal

ActiveLibrary

tobento/css-modal
=================

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

1.0.1(12mo ago)039↓33.3%3MITJavaScript

Since Feb 27Pushed 12mo ago1 watchersCompare

[ Source](https://github.com/tobento-ch/css-modal)[ Packagist](https://packagist.org/packages/tobento/css-modal)[ Docs](https://www.tobento.ch)[ RSS](/packages/tobento-css-modal/feed)WikiDiscussions 1.x Synced 1mo ago

READMEChangelog (2)DependenciesVersions (3)Used By (3)

CSS Modals
==========

[](#css-modals)

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

[](#table-of-contents)

- [Getting started](#getting-started)
    - [Browser support](#browser-support)
    - [Import Files](#import-files)
- [Documentation](#documentation)
    - [Css](#css)
        - [Basic Usage](#basic-usage)
        - [Sizing](#sizing)
        - [Positions](#positions)
        - [Animations](#animations)
    - [Javascript](#javascript)
        - [Register](#register)
        - [Methods](#methods)
        - [Events](#events)
- [Credits](#credits)

---

Getting started
===============

[](#getting-started)

Browser support
---------------

[](#browser-support)

Modern browser only.

Import Files
------------

[](#import-files)

```

```

Documentation
=============

[](#documentation)

You may visit the [**docs.tobento.ch/css-modal**](https://docs.tobento.ch/css-modal) page for documentation with demo.

Css
---

[](#css)

### Basic Usage

[](#basic-usage)

The basic modal structure is:

```

        Head
        Body
        Foot

```

The minimal modal structure is:

```

        Body

```

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.

```

        Body

```

### Sizing

[](#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

```

        Body

```

You may combine the following sizes:

```

        Body

```

If you are using the [basis.css - Sizing](https://github.com/tobento-ch/css-basis#sizing) you may use it too.

### Positions

[](#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:

```

        Body

```

Example top centered aligned:

```

        Body

```

### Animations

[](#animations)

Available Animations:

- `modal-fade`
- `modal-scale`
- `modal-swing`

Example:

```

        Body

```

Javascript
----------

[](#javascript)

### Register

[](#register)

The Html markup for registering a modal is:

```

Open modal

        Body

```

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

```

        close
        Body
        close

```

**Options:**

```

        Body

```

OptionValueDescription`"scroll"``"hidden"`, defaultDisables scroll, keeping scrollbar hidden.`"scroll"``"visible"`Disables scroll, keeping scrollbar visible.`"scroll"``null`Without disable scroll.`"closeTriggers"``".modal-background, .modal-close"`, defaultThe trigger classes to close the modal.### Methods

[](#methods)

You may import the modals module and use its methods:

```

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

```

### Events

[](#events)

EventDescription`open`This event is fired **before** the modal is opened.`opened`This event is fired **after** the modal is opened.`close`This event is fired **before** the modal is closed.`closed`This event is fired **after** the modal is closed.```
modals.get('ID').listen('open', (modal) => {
    modal.modalEl.querySelector('.modal-body').innerHTML = 'New Body';
});
```

Credits
=======

[](#credits)

- [Tobias Strub](https://www.tobento.ch)
- [All Contributors](../../contributors)

###  Health Score

30

—

LowBetter than 64% of packages

Maintenance50

Moderate activity, may be stable

Popularity9

Limited adoption so far

Community12

Small or concentrated contributor base

Maturity42

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~225 days

Total

3

Last Release

360d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/055d6a1b5c2384bb179c75ab0b55914231d898fdc4dffeb30770f81200e52206?d=identicon)[TOBENTOch](/maintainers/TOBENTOch)

---

Top Contributors

[![tobento-ch](https://avatars.githubusercontent.com/u/16684832?v=4)](https://github.com/tobento-ch "tobento-ch (2 commits)")

---

Tags

cssmodaltobento

### Embed Badge

![Health badge](/badges/tobento-css-modal/health.svg)

```
[![Health](https://phpackages.com/badges/tobento-css-modal/health.svg)](https://phpackages.com/packages/tobento-css-modal)
```

###  Alternatives

[nunomaduro/termwind

It's like Tailwind CSS, but for the console.

2.5k239.8M286](/packages/nunomaduro-termwind)[sabberworm/php-css-parser

Parser for CSS Files written in PHP

1.8k191.2M65](/packages/sabberworm-php-css-parser)[matthiasmullie/minify

CSS & JavaScript minifier, in PHP. Removes whitespace, strips comments, combines files (incl. @import statements and small assets in CSS files), and optimizes/shortens a few common programming patterns.

2.0k30.5M336](/packages/matthiasmullie-minify)[pelago/emogrifier

Converts CSS styles into inline style attributes in your HTML code

94944.1M110](/packages/pelago-emogrifier)[scssphp/scssphp

scssphp is a compiler for SCSS written in PHP.

62827.7M220](/packages/scssphp-scssphp)[tubalmartin/cssmin

A PHP port of the YUI CSS compressor

23241.0M53](/packages/tubalmartin-cssmin)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)