https://github.com/threespot/modal
A progressively enhanced modal window that supports multiple toggles and multiple close buttons.
https://github.com/threespot/modal
Last synced: 7 months ago
JSON representation
A progressively enhanced modal window that supports multiple toggles and multiple close buttons.
- Host: GitHub
- URL: https://github.com/threespot/modal
- Owner: Threespot
- Created: 2020-06-30T20:50:15.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T10:21:38.000Z (over 3 years ago)
- Last Synced: 2025-01-28T20:19:10.889Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 2.44 MB
- Stars: 0
- Watchers: 4
- Forks: 0
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Modal
A progressively enhanced modal window that supports multiple toggles, multiple close buttons, and works with pure CSS thanks to `:target` pseudo selector.
```bash
yarn add @threespot/modal
```
## Usage
### Javascript
```jsx
import Modal from "@threespot/modal";
const container = document.getElementById("modal");
new Modal(container, opts);
// If you have more than one modal on the page
const containers = document.querySelectorAll(".Modal");
// ES6
containers.forEach(container => new Modal(container));
// ES5
for (var i = 0, len = containers.length; i < len; i+=1) {
new Modal(containers[i]);
}
```
**Styles needed**
```scss
//------------------------------------------------------------------------
// Modal windows (required by modals.js)
//
// Content is shown by default and hidden once JS runs
//------------------------------------------------------------------------
.Modal {
$selector: &;
$open-speed: 250ms;
$close-speed: 500ms;
$z-index: 900;
$bg-default: #fff; // This can be whatever you want the modal color to be
background-color: rgba(#000, 0.5);// overlay color
bottom: 0;
left: 0;
margin: 0 !important; // reset u-richtext div styles
max-height: 0; // iOS fix
opacity: 0;
overflow: auto; // allows scrollig when content exceeds viewport height
-webkit-overflow-scrolling: touch; // iOS “momentum” scrolling
position: fixed;
right: 0;
top: 0;
transition: max-height 0s linear $close-speed,
visibility 0s linear $close-speed,
opacity $close-speed;
visibility: hidden; // hide from screen readers and keyboards until active
z-index: $z-index; // must be greater than overlay
// Styles will be applied when URL hash matches modal ID attribute
&:not([aria-hidden]):target,
&[aria-hidden="false"] {
max-height: 100vh; // can’t set to “none” because that can't be transitioned
opacity: 1;
transition: max-height 0s linear 0s, visibility 0s linear 0s, opacity $open-speed;
visibility: visible;
}
// Modal content wrapper
&-content {
@include fs-print-hide;
background-color: $bg-default;
opacity: 0;
position: relative;
transform: scale(0.95);
transition: all $close-speed fs-easing('easeOutCubic');
visibility: hidden;
width: 100%;
z-index: $z-index + 1;
#{$selector}:not([aria-hidden]):target &,
#{$selector}[aria-hidden="false"] & {
opacity: 1;
transform: scale(1);
transition: all $open-speed fs-easing('easeOutCubic');
visibility: visible;
}
}// end content
// Close button
&-close {
padding: fs-rem(15px);
position: fixed;
right: 0;
top: 0;
transition: all 150ms ease-in-out;
z-index: $z-index + 2;
}// end close
// if you want the modal window to take up the entire screen (optional)
&--fullWidth {
#{$selector}-content {
min-height: 100%;
}
}
}// end Modal
```
**Minimum markup needed**
```html
Open
```
### API
**Required Data Attributes for markup**
`data-modal-close` tells Modal what button(s) can close the modal window. This can be anywhere inside of the `.Modal`
`data-modal="{YOUR_MODAL_ID_GOES_HERE}"` - toggle button(s) for the modal button must have this attribute with the `.Modal` corresponding ID as its value. This allow us to toggle the `.Modal` on and off.
**`new Modal(el, [opts])`**
```jsx
// This is the Modal that wraps everything except for the toggle/open button(s).
const el = document.querySelector('.Modal');
// Opts Config (optional)
{
// {string} CSS transition speed to delay focus
// Default value: 100
transitionSpeed: "100",
// {string} Class(es) to apply on open modal
// Multiples classes are stored inside a string delimited by a space
// Default value: ''
activeClasses: "is-active is-privacy-modal",
// {string} Class of modal content wrapper
// default value: "Modal-content"
modalContentClass: "Modal-content",
// {function} Once Modal object is constructed, this function will be called
// default value: null
onReady: function() {
console.log('Success!')
}
}
```
### License
This is free software and may be redistributed under the terms of the MIT license.
### About Threespot
Threespot is an independent digital agency hell-bent on helping those, and only those, who are committed to helping others. Find out more at [https://www.threespot.com](https://www.threespot.com/).