https://github.com/subzane/anymodal
anyModal is a responsive solution for modal windows written in javascript. This new version is written in vanilla JavaScript and has no other dependencies.
https://github.com/subzane/anymodal
css-animations javascript modal-windows
Last synced: 7 months ago
JSON representation
anyModal is a responsive solution for modal windows written in javascript. This new version is written in vanilla JavaScript and has no other dependencies.
- Host: GitHub
- URL: https://github.com/subzane/anymodal
- Owner: SubZane
- License: mit
- Created: 2016-01-18T14:17:05.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-01T10:15:19.000Z (almost 3 years ago)
- Last Synced: 2025-03-07T22:02:05.357Z (7 months ago)
- Topics: css-animations, javascript, modal-windows
- Language: JavaScript
- Homepage: https://subzane.github.io/anyModal/
- Size: 585 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE-MIT
Awesome Lists containing this project
README
# anyModal v1.3
anyModal is a responsive solution for modal windows written in javascript. This new version is written in vanilla JavaScript and has no other dependencies.
## Demo
http://subzane.github.io/anyModal/
## Features
- Responsive modal windows. Works great on desktop computers as well on smart phones.
- Can be used for video, images and text
- Unlimited content possible inside modal window. Uses friendly simple scrollbars.
## Installation
```
yarn add anyModal
```
### Setup
```html
```
## Usage
```javascript
document.addEventListener('DOMContentLoaded', function (event) {
anyModal.init({
transitiontime: 300,
redrawOnResize: true,
backgroundscroll: true,
});
});
```
### Settings and Defaults
```javascript
options: {
transitiontime: 300,
redrawOnResize: true,
backgroundscroll: true,
};
```
- `transitiontime`: Time in milliseconds to time transtions set in your CSS. Change this if you change your CSS
- `redrawOnResize`: Force a redraw if the viewport changes.
- `backgroundscroll`: Allow background behind modal to scroll.
### Typical setup
This could be your typical script setup.
Add the following javscript to execute the script on load.
```javascript
document.addEventListener('DOMContentLoaded', function (event) {
anyModal.init();
});
```
The following markup to launch the modal window. Use the `data-effect` attribute to change effects.
```html
Fade and zoom
```
### Effects available
- `rm-effect-1`: Fade and zoom
- `rm-effect-2`: Slide from right
- `rm-effect-3`: Pop from bottom
- `rm-effect-4`: Newspaper
- `rm-effect-5`: Fall
- `rm-effect-6`: Side fall
- `rm-effect-7`: Sticky up
- `rm-effect-8`: Side flip
- `rm-effect-9`: Top flip
- `rm-effect-10`: 3D sign
- `rm-effect-11`: Scale
- `rm-effect-12`: 3D slit
- `rm-effect-13`: 3D rotate bottom
- `rm-effect-14`: 3D rotate in left
Add the following markup for the modal window itself. The ID of the modal window must match the `data-modal` attribute of the button
```html
Modal Dialog
Sed posuere consectetur est at lobortis.
```
### External modal setup
The following markup to launch the modal window. Use the `data-url` attribute to use external modal content.
```html
Fade and zoom
```
## Attributes explained
- `data-modal`: ID of of modal element
- `data-effect`: Effect
- `data-title`: Title of modal when using external content
- `data-url`: URL to external modal content
## changelog
### 1.3
- Updated documentation and github workflow and new demo url
### 1.2.1
- Fixed issue when the backgrund is scrollable even when the modal is open.
- Updated to work with Gulp rather than Grunt
### 1.2.0
- Now available on Yarn instead of Bower
#### 1.1.0
- Modal windows can now display content from other URLs
- More hooks added
#### 1.0.1
- Fixed bug where an iframed video was displayed on Safari iPhone even if the modal was hidden.
#### 1.0.0
- Initial release