Keukenhof.js page on npm
# With npm
npm i keukenhof
# With Yarn
yarn add keukenhof<script src="https://unpkg.com/keukenhof"></script>Part of the preparation of the library work is hidden, you just need to create a layout. There are no restrictions on the layout of your modal window, you just need to add data-keukenhof-open to the value of which you need to specify the selector of the window that should open on click and data-keukenhof-close for the element that should close the currently active modal
<!DOCTYPE html>
<title>Keukenhof.js modal example</title>
<style>
#modal {
display: none;
}
#modal.isOpen {
display: block;
}
</style>
<button data-keukenhof-open="#modal">Open modal</button>
<!-- Main modal wrapper with required id -->
<div id="modal" role="dialog" aria-hidden="true" aria-labelledby="title" aria-describedby="desc">
<!-- Element for handling a click outside the modal window -->
<div class="overlay" tabindex="-1" data-keukenhof-close></div>
<header>
<!-- Button to close the modal window -->
<button class="close" aria-label="Close modal" data-keukenhof-close>Close</button>
</header>
<!-- Body used to improve a11y by describing the purpose of the modal -->
<main>
<h2 id="title">Keukenhof.js modal</h2>
<p id="desc">Lightweight and easy to use the library for modals</p>
</main>
</div>
<script src="https://unpkg.com/keukenhof"></script>
<script>
Keukenhof.init();
</script>An alternative connection option is to use import Keukenhof.js
import {Keukenhof} from 'keukenhof';
// Initializing modal windows based on markup
Keukenhof.init({
// options
});
// Configure and open modal by selector
Keukenhof.open('#modal', {
// options
});
// Close active modal window
Keukenhof.close();The documentation can also be found on the Keukenhof.js website
| Options | Type | Description |
|---|---|---|
openAttribute |
String | The attribute containing the selector of the modal window that should be opened by clicking on the element |
closeAttribute |
String | The attribute marking elements inside the modal window, clicking on which will close this modal window |
openClass |
String | The class name added for the open modal window |
openingClass |
String | The class name added for the modal window that is in the process of opening (required for modals using CSS animations) |
closingClass |
String | The class name added for the modal window that is in the process of closing (required for modals using CSS animations) |
hasAnimation |
Boolean | Indicates the need to wait for the completion of the CSS animation of opening/closing the modal window |
isAssignFocus |
Boolean | Indicates the need to focus on an interactive element inside the modal after opening |
isFocusInside |
Boolean | Indicates the need to restrict focusable interactive elements using the keyboard inside the active modal |
scrollBehavior |
Object | Specify the need to block the scroll after opening a modal window. The scroll is blocked with overflow: hidden; if after closing the modal the overflow value should be defined just specify this as defaultValue |
onOpen |
Function | Defines a function that will be called when the modal is open (if hasAnimation: true; is called after the animation has finished) |
onClose |
Function | Defines a function that will be called when the modal is close (if hasAnimation: true; is called after the animation has finished) |
beforeOpen |
Function | Defines a function to be called before the modal opens. If the function returns false the modal won't open |
beforeClose |
Function | Defines a function to be called before the modal closes. If the function returns false the modal won't close |
Initializes all modals based on markup. Accepts one optional parameter for configuration
Keukenhof.init({
selector: '#modal-1',
openAttribute: 'data-modal-open',
closeAttribute: 'data-modal-close',
openClass: 'is-open',
openingClass: 'is-opening',
closingClass: 'is-closing',
hasAnimation: true,
isAssignFocus: false,
isFocusInside: false,
scrollBehavior: {
isDisabled: true,
},
onOpen: () => console.log('The modal window is open'),
onClose: () => console.log('The modal window is close'),
});Opens a modal window with the given selector. The open() method has a second optional parameter for configuration
// With config
Keukenhof.open('#modal', {
openAttribute: 'data-modal-open',
closeAttribute: 'data-modal-close',
openClass: 'is-open',
openingClass: 'is-opening',
closingClass: 'is-closing',
hasAnimation: true,
});
// Without config
Keukenhof.open('#modal');Closes the modal with the given selector. If no parameters are passed to the close() method, the currently open window will be closed
// With selector
Keukenhof.close('#modal');
// Without selector
Keukenhof.close();- Clone the repository
git@github.com:Alexandrshy/keukenhof.git - Go to the project directory
cd keukenhof - Install dependencies
yarn - Run dev build with auto rebuild after any changes
yarn build:dev - Complete your improvements, commit changes and submit your pull request for review code