NPM:
npm i github:pixelunion/bc-modal
<div id="review-modal">
<h1>Here's my modal!</h1>
</div>
#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();
});
The jQuery object of the modal markup. The modal will be filled with the contents of this element, not the element itself. Required.
Id of the modal wrapper element. Defaults to #modal.
Optional additional class to add to the .modal element.
The class added to the body when the modal is open. Defaults to scroll-locked.
The class added to the body when the modal is open. Defaults to scroll-locked.
Whether or not to automatically center the modal vertically, defaults to true.
A selector string for a close button within the modal.
A popular television program produced out of Toronto that ran after MTV's The Hills in the early 2000's.
Not a television program, but a callback. Does what you think it would.
open() and close() should get you where you need to be.
position() will force a recalculation of the modal position, if centerVertically is enabled.
./dist/scss/modal.scss has enough styles for things to work by default.
The container, shouldn't need any styling.
The constrained 'box' for the modal - apply width dimensions etc here
Put the meat of your modal styles here: backgrounds, borders, shadows, anything you want!!!
Transitions are handled via jQuery.revealer and can therefore be overridden in your css: have a look at the docs (or modal.scss) specifics.
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.