HTML JavaScript CSS
Switch branches/tags
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

Mohill

💄 Hill-shaped modal element

screenshot

Install or Download

yarn add mohill
npm i -S mohill

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

Usage

First, if you read as a separate file

<script src="/path/tp/mohill.js"></script>

Please specify id for children of target element. It will be used when opening.

  <!-- ... -->
  <div id="foo-trigger"></div>
  <div id="bar-trigger"></div>

  <div id="target">
    <div id="foo" style="display:none">
      <div id="close-button"></div>
    </div>
    <div id="bar" style="display:none">
      ...
    </div>
  </div>
  <!-- ... -->

For example, if you want to set an event for an element in #foo, please set it before creating Mohill instance.

import Mohill from 'mohill';

document.getElementById('close-button').addEventListener('click', () => {
  mohill.close();
});

const mohill = new Mohill({
  target: getElementById('target'),
  data: {
    style: {
      // defaults
      height: '70vh',
      width: '70%',
      coverBackgroundColor: 'rgba(0,0,0,.4)',
      backgroundColor: '#222',
      borderRadius: '6px'
    }
  }
});

document.getElementById('foo-trigger').addEventListener('click', () => {
  mihill.open('foo');
});

document.getElementById('bar-trigger').addEventListener('click', () => {
  // If you want to change the style
  mihill.setStyle({backgroundColor: '#ccc'});
  mihill.open('bar');
});

Example

  • test/fixtures/index.js
  • example/webpack/index.js

LICENSE

The MIT License (MIT)

Copyright (c) 2017 nju33 nju33.ki@gmail.com