Bottom Sliding Modal Window With Vanilla JavaScript – Mohill

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'
    }
  }
});