Author: | nju33 |
---|---|
Views Total: | 976 views |
Official Page: | Go to website |
Last Update: | March 29, 2017 |
License: | MIT |
Preview:

Description:
Mohill is a vanilla JavaScript plugin to create a modal window sliding from the bottom of the screen when triggered.
Install the Mohill:
# Yarn yarn add mohill # NPM $ npm install mohill
Basic usage:
Link to the main JavaScript file:
<script src="mohill.js"></script>
Create the modal windows :
<div id="app"> <div id="modal-1" class="page" style="display:none"> Modal 1 Content <div class="close">Close</div> </div> <div id="modal-2" class="page" style="display:none"> Modal 2 Content <div class="close">Close</div> </div> </div>
Create trigger elements to toggle the modal windows:
<div id="button1"></div> <div id="button2"></div>
Create a new Mohill object and specify the modal container.
const mohill = new Mohill({ target: document.getElementById('app'), data: { style: { coverBackgroundColor: 'rgba(0,0,0,.4)' } } });
Active the trigger elements to toggle the desired modal windows:
document.getElementById('button1').addEventListener('click', () => { mohill.setStyle({backgroundColor: '#0d5661'}); mohill.open('demo-1'); }); document.getElementById('button2').addEventListener('click', () => { mohill.setStyle({backgroundColor: '#6d2e5b'}); mohill.open('demo-2'); });
Active the close button inside your modal windows.
Array.prototype.slice.call(document.getElementsByClassName('close')) .forEach(el => { el.addEventListener('click', () => { mohill.close(); }); });
Override the default styles of the modal window.
const mohill = new Mohill({ target: document.getElementById('app'), data: { style: { height: '70vh', width: '70%', coverBackgroundColor: 'rgba(0,0,0,.4)', backgroundColor: '#222', borderRadius: '6px' } } });