ContextModal
Display related elements with axis of trigger element. I made it to make it easy to make things like context-menu and dropdown, etc.
Install or Download
yarn add context-modalnpm i -S context-modal
Or access to releases page. Then, download the latest version.
Usage
First, if you read as a separate file
Markup is like this. (test/fixtures/index.html
)
<!-- [data-context-modal-event-type=click] is default -->Button <!-- Your designed element -->
data-context-modal-for
works like <label for>
, data-context-modal-id
works as <input id>
.
That is, [data-context-modal-id=foo]
will be shown using something of [data-context-modal-for=foo]
as a trigger.
The trigger is click
by default, but you can change only that element by adding data-context-modal-event-type
.
// For es;const ctxModal = document // This is global opts // Elements to prevent scrolling while displaying // // Use `data-context-modal-scrollable` // if you want to change only certain elements scrollable: documentbody // default // Transition values at `onshow` and `onhide` // // Use `data-context-modal-transition-for-onshow` or `data-context-modal-transition-for-onhide` // if you want to change only certain elements transition: 'opacity .2s linear' 'none' // defaults;ctxModal;
After ctxModal.init
, [data-context-modal-id]
will be able to use the following events.
contextmodalwillshow
Just before being showncontextmodaldidshow
After being shown (after transition)contextmodalwillhide
Just before hidingcontextmodaldidhide
After hiding (after transition)
Example
test/fixtures/index.js
example/webpack/index.js
LICENSE
The MIT License (MIT)
Copyright (c) 2017 nju33 nju33.ki@gmail.com