Mohill
Install or Download
yarn add mohill
npm i -S mohillOr 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.jsexample/webpack/index.js
LICENSE
The MIT License (MIT)
Copyright (c) 2017 nju33 nju33.ki@gmail.com
