https://github.com/tobento-ch/css-modal
A classic modal, in which you can include any content you want.
https://github.com/tobento-ch/css-modal
Last synced: 2 months ago
JSON representation
A classic modal, in which you can include any content you want.
- Host: GitHub
- URL: https://github.com/tobento-ch/css-modal
- Owner: tobento-ch
- License: mit
- Created: 2024-02-27T13:43:47.000Z (almost 2 years ago)
- Default Branch: 1.x
- Last Pushed: 2025-05-22T14:38:09.000Z (7 months ago)
- Last Synced: 2025-08-01T10:02:25.154Z (5 months ago)
- Language: JavaScript
- Size: 4.88 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
- [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
## Browser support
Modern browser only.
## Import Files
```html
```
# Documentation
You may visit the [**docs.tobento.ch/css-modal**](https://docs.tobento.ch/css-modal) page for documentation with demo.
## Css
### Basic Usage
The basic modal structure is:
```html
```
The minimal modal structure is:
```html
```
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.
```html
```
### 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
```html
```
You may combine the following sizes:
```html
```
If you are using the [basis.css - Sizing](https://github.com/tobento-ch/css-basis#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:
```html
```
Example top centered aligned:
```html
```
### Animations
Available Animations:
* ```modal-fade```
* ```modal-scale```
* ```modal-swing```
Example:
```html
```
## Javascript
### Register
The Html markup for registering a modal is:
```html
```
You may add the ```modal-close``` class to any tag for closing the modal:
```html
```
**Options:**
```html
```
| Option | Value | Description |
| --- | --- | --- |
| ```"scroll"``` | ```"hidden"```, default | Disables scroll, keeping scrollbar hidden. |
| ```"scroll"``` | ```"visible"``` | Disables scroll, keeping scrollbar visible. |
| ```"scroll"``` | ```null``` | Without disable scroll. |
| ```"closeTriggers"``` | ```".modal-background, .modal-close"```, default | The trigger classes to close the modal. |
### Methods
You may import the modals module and use its methods:
```html
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
| Event | Description |
| --- | --- |
| ```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. |
```js
modals.get('ID').listen('open', (modal) => {
modal.modalEl.querySelector('.modal-body').innerHTML = 'New Body';
});
```
# Credits
- [Tobias Strub](https://www.tobento.ch)
- [All Contributors](../../contributors)