JavaScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
example/webpack
images
lib
src/styles
test
.babelrc
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
LICENSE.md
README.md
bower.json
bs-config.js
build.js
dev-server.js
package.json
prod.js
rollup.config.js
yarn.lock

README.md

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.

screenshot

Install or Download

yarn add context-modal
npm i -S context-modal

Or access to releases page. Then, download the latest version.

Usage

First, if you read as a separate file

<script src="/path/tp/context-modal.js"></script>

Markup is like this. (test/fixtures/index.html)

<!-- [data-context-modal-event-type=click] is default -->
<div data-context-modal-for="menu" data-context-modal-event-type="click">Button</div>
<div data-context-modal-id="menu" style="display:none">
  <!-- Your designed element -->
</div>

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.

Also, by default, the top left of the modal comes to the position you clicked. If you want to fix this somewhere else (eg bottom-left), add data-context-menu-offset to [data-context-menu-for] element. The following values can be specified for this.

  • left-top
  • left-bottom
  • right-top
  • right-bottom
// For es
import ContextModal from 'context-modal';
const ctxModal = new ContextModal(document.querySelectorAll('[data-context-modal-for]'), {
  // This is global opts

  // Elements to prevent scrolling while displaying
  //
  // Use `data-context-modal-scrollable`
  // if you want to change only certain elements
  scrollable: document.body,  // 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.init();

After ctxModal.init, [data-context-modal-id] will be able to use the following events.

  • contextmodalwillshow
    Just before being shown
  • contextmodaldidshow
    After being shown (after transition)
  • contextmodalwillhide
    Just before hiding
  • contextmodaldidhide
    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