Pure CSS Components Modal

A small JS utility for working with Pure.CSS Components Modal.

NOTE: This is an independent project, and is not directly associated with Pure CSS.

Summary

Pure.CSS Components is a library of CSS only components designed for use with the Pure.CSS framework. None of the components require any JavaScript in order to function. There may be times, however, when it can be useful to have JavaScript to manipulate a component. Therefore, I've created individual JS modules to complement the CSS only components. Don't need JS? Don't bother. Need a little JS? Use just what you need.

Install from NPM

yarn add purecss-components-modal

or

npm i purecss-components-modal -S

Example

An example HTML Modal:

<!-- #login-modal is considered the base node for this modal -->
<input type="radio" class="open-modal pcssc-invisible" id="login-modal" name="modal-toggle"/>
<label for="test-modal" class="pure-button">Open Modal</label>
<div class="modal-container pcssc-invisible">
    <div class="modal-frame">
        <div class="modal-header">
            Header
            <input type="radio" id="close-modal" name="modal-toggle" class="close-modal pcssc-invisible"/>
            <label for="close-modal" class="close-button">x</label>
        </div>
        <div class="modal-body">
            Body
        </div>
    </div>
</div>

This JS would work with the Modal defined above:

import Modal from 'purecss-components-modal';

// Pass in a selector to the base node for the modal you want to work with
const loginModal = Modal('#login-modal');

// Show the modal
loginModal.open();

// Hide the modal
loginModal.close();

// Toggle the modal
loginModal.toggle();

// Check if the modal is open
loginModal.isOpen();

// Check if the modal is closed
loginModal.isClosed();