๐ Hill-shaped modal element
yarn add mohill
npm i -S mohill
Or access to releases page. Then, download the latest version.
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');
});
test/fixtures/index.js
example/webpack/index.js
The MIT License (MIT)
Copyright (c) 2017 nju33 [email protected]