https://github.com/bigcommerce/themes-lib-modal
https://github.com/bigcommerce/themes-lib-modal
Last synced: 24 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/bigcommerce/themes-lib-modal
- Owner: bigcommerce
- License: mit
- Created: 2021-06-03T12:52:57.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-08-17T12:54:59.000Z (almost 3 years ago)
- Last Synced: 2026-04-18T00:38:27.678Z (3 months ago)
- Language: JavaScript
- Size: 1.27 MB
- Stars: 0
- Watchers: 3
- Forks: 2
- Open Issues: 20
-
Metadata Files:
- Readme: readme.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Bigcommerce Modal Module
## Installation
NPM:
```
npm i github:pixelunion/bc-modal
```
## Usage
```
Here's my modal!
```
```
#review-modal {
display: none;
}
```
```
import $ from 'jquery';
import Modal from 'bc-modal';
const reviewModal = new Modal({
el: $('#review-modal')
});
$('button').on('click', (event) => {
reviewModal.open();
});
```
## Options
#### `el`
The jQuery object of the modal markup. The modal will be filled with the _contents_ of this element, not the element itself. Required.
#### `modalId`
Id of the modal wrapper element. Defaults to `#modal`.
#### `modalClass`
Optional additional class to add to the `.modal` element.
#### `bodyOverflowClass`
The class added to the body when the modal is open. Defaults to `scroll-locked`.
#### `bodyOverflowClass`
The class added to the body when the modal is open. Defaults to `scroll-locked`.
#### `centerVertically`
Whether or not to automatically center the modal vertically, defaults to `true`.
#### `closeSelector`
A selector string for a close button within the modal.
#### `afterShow`
A popular television program produced out of Toronto that ran after MTV's _The Hills_ in the early 2000's.
#### `afterHide`
Not a television program, but a callback. Does what you think it would.
## Methods
`open()` and `close()` should get you where you need to be.
`position()` will force a recalculation of the modal position, if `centerVertically` is enabled.
## Styling
`./dist/scss/modal.scss` has enough styles for things to work by default.
#### `.modal-wrapper`
The container, shouldn't need any styling.
#### `.modal`
The constrained 'box' for the modal - apply width dimensions etc here
#### `.modal-content`
Put the meat of your modal styles here: backgrounds, borders, shadows, anything you want!!!
### Animation classes
Transitions are handled via jQuery.revealer and can therefore be overridden in your css: have a look at [the docs](https://github.com/PixelUnion/jquery.revealer) (or modal.scss) specifics.
## Further Development
For debugging or improvements you can run a standalone demo version of the modal using a very basic node server:
```
$ npm install
$ npm run serve
```
This will allow you to make changes to the JS and HTML. To re-compile the scss you'll need to run `npm run build` from a separate terminal window after each change.