https://github.com/jayfreestone/hey
A vanilla-JS modal.
https://github.com/jayfreestone/hey
Last synced: 3 months ago
JSON representation
A vanilla-JS modal.
- Host: GitHub
- URL: https://github.com/jayfreestone/hey
- Owner: jayfreestone
- Created: 2016-12-24T17:28:38.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2021-10-05T16:13:57.000Z (over 4 years ago)
- Last Synced: 2025-10-02T08:29:30.932Z (6 months ago)
- Language: JavaScript
- Size: 12 MB
- Stars: 8
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# :wave: hey.js [DEPRECATED]
hey.js is a simple dependency-free modal written in JavaScript.
## Why should I use hey.js
- Accessible (TODO).
- Lightweight.
- Flexible - works with inline content, dynamic content or AJAX'd content (TODO).
- No jQuery dependency.
- Great default styles that gracefully take care of scrollbar shifting and overflow issues.
### Go on...
There are loads of great modals out there, such as [Modaal](http://www.humaan.com/modaal/).
However most don't address the little UI annoyances that plague modals, such as the 'scrollbar shift' when applying `overflow: hidden` to body.
### Browser Support
Supports all recent versions of major browsers out of the box (IE10 and up). IE9 support requires a [classList](https://github.com/eligrey/classList.js/) polyfill.
## Installation
Install hey via NPM/Yarn:
// Yarn
yarn add hey.js
// NPM
npm install --save hey.js
You can include hey via a module bundler, such as [Webpack](https://webpack.github.io/):
// JS
import hey from 'hey.js';
Or just include the script directly:
You'll also need to include the base stylesheet, and optionally a theme. You can import them as part of your build process:
// SASS
@import '../../node_modules/hey.js/dist/css/hey.css';
@import '../../node_modules/hey.js/dist/css/hey-minimal.css';
Or include them directly:
## How to use
All below methods require manual initialization by passing in the trigger (link/button), like so:
heyModal(document.querySelector('.modal-trigger'))
If you have multiple modals with the same class you'll need to loop over and initialize each:
var myModals = document.querySelectorAll('.js-modal-trigger');
for (var i = 0; i < myModals.length; i++) {
heyModal(myModals[i]);
}
### Inline
`hey.js` generates the markup it needs to create accessible modals, without you having to worry about copying and pasting markup.
As long as you use the appropriate `data` attributes, `hey.js` will dynamically create a modal with your in-page content, then remove the old version from the DOM.
You can include an 'inline' modal on the page like so:
Modal title
This is a modal and the contents
Then initialise it like so:
const myModal = heyModal(document.querySelector('.great-modal-trigger'));
### Confirm prompt
You may want to use `hey.js` as a confirm prompt for a link - for instance, clicking on link that performs a dangerous action:
You can do this by creating an inline modal and using the data-hey attribute:
Delete post
This is a modal and the contents
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis metus est, eu aliquet arcu
interdum eu. Mauris in tortor semper, pulvinar nunc et, tincidunt lectus. Donec erat ex, ultricies sit
Delete
Cancel
However, `hey.js` also provides a simpler alternative. You can omit the modal target altogether, and have `hey.js` generate it:
Simply add the `data-hey-confirm` attribute along with `data-hey-title` and `data-hey-body`. The confirm link will automatically be the target link.
This works well when there are a lot of links on the page that would need modals, and where it is impractical to produce the markup manually. The downside is that this approach is less flexible - there is no way to include HTML in the body of the modal.
#### Modal link attributes:
If you're using an inline modal, only the `data-hey` attribute is required.
If you're generating a confirm modal, the `data-hey-title`, `data-hey-body` and `data-hey-confirm` attributes are all required.
| Attribute | Description |
|--------------------|-----------------------------------------------------------------|
| data-hey | The class/id of the modal target (optional). |
| data-hey-title | The title of the modal (optional). |
| data-hey-body | The main content of the modal (optional). |
| data-hey-confirm | Generates confirm yes/no actions based on a link (optional). |
#### Modal attributes
| Attribute | Description |
|-----------------|---------------------------------------------------------------------|
| data-hey-title | The title of the modal, appearing in the header. |
| data-hey-body | The main content/body of the modal. |
| data-hey-close | If this element is clicked it will close the modal (optional). |
## Methods
Your `hey.js` modal has several methods once initialised (like so):
const myModal = heyModal(document.querySelector('.great-modal-trigger'));
### Open
Opens the modal manually:
myModal.open();
### Close
Closes the modal manually:
myModal.close();
### Destroy (TODO)
Removes the modal and cleans up:
myModal.destroy();
## Events
`hey.js` fires two custom events (`heyOpen` and `heyClose`) on the main modal element.
You can either add an event listener to the generated wrapper, e.g.:
myModal.comp.wrapper.addEventListener('heyOpen', () => {
console.log('open!');
});
Or you can use the included `.on` helper method, which defaults to the `wrapper`:
myModal.on('heyOpen', () => {
console.log('opening!');
});
## Theming
The essential 'base' styles are in `hey.css`. These should be included first and overridden as necessary.
It's worth noting that the modal close event, which is responsible for firing events and mitigating shifting scrollbars, happens when the transition is finished on the `.modal` element. This means if the dialog has a separate transition, it should finish *before* the main modal's transition ends. If this isn't the case, the dialog will animate during (or after the scrollbar change), which will cause an unnecessary shift.