keukenhof
Advanced tools
Readme
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();
git@github.com:Alexandrshy/keukenhof.gitcd keukenhofyarnyarn build:devFAQs
Lightweight and easy to use the library for modals
The npm package keukenhof receives a total of 25 weekly downloads. As such, keukenhof popularity was classified as not popular.
We found that keukenhof demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.