keukenhof

v1.11.15

Published

2 years ago

Lightweight and easy to use the library for modals

Downloads

160

0High
0Medium
0Low

alexandrshy

javascript modal dialog popup

Demo

Installation

Package Manager

Keukenhof.js page on npm

# With npm
npm i keukenhof

# With Yarn
yarn add keukenhof

CDN

<script src="https://unpkg.com/keukenhof"></script>

Usage

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>

Module bundlers

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();

Docs

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 |

API

init()

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'),
});

open()

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');

close()

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();

Contribute

Clone the repository [email protected]: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

Licensing

MIT license

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Table of Contents