Simple Responsive Modal Written In Pure JavaScript – hey.js

Category: Javascript , Modal & Popup | January 5, 2017
Author: jayfreestone
Views Total: 794
Official Page: Go to website
Last Update: January 5, 2017
License: MIT

Preview:

Simple Responsive Modal Written In Pure JavaScript – hey.js

Description:

hey.js is a simple, lightweight, responsive dependency-free modal written in Vanilla JavaScript. It can be included inline or generated dynamically. Accessible by default and dependency-free.

How to use it:

Load the style sheet style.min.css in the head section, and the JavaScript file heyModal.min.js at the bottom of your html page.

<link rel="stylesheet" href="dist/css/style.min.css">
<script src="dist/js/heyModal.min.js"></script>

Create the modal with custom header and body content as this:

<div id="great-modal" style="display: none;">
  <h3 data-hey-title>Modal <a href="#">title</a></h3>
  <div data-hey-body>
    <p>This is a modal and the contents</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis metus est, eu aliquet arcu
        interdum eu. Mauris in tortor semper, pulvinar nunc et, tincidunt lectus. Donec erat ex, ultricies sit
        amet pharetra <a href="#">sit amet</a>, elementum dictum velit. Aenean sed viverra eros. Mauris sagittis, nisi a rutrum
        interdum, enim purus tempus magna, quis bibendum ante ante sit amet eros. Duis tempus ex sed lorem
        porttitor, vitae dapibus ante scelerisque. In pharetra a nisl a condimentum. Vivamus congue volutpat
        felis in mollis. Morbi ante sem, luctus at libero sit amet, euismod eleifend leo. Donec sodales feugiat
        ex ac dapibus. Sed sit amet fringilla mauris.</p>
  </div>
</div>

You might need a trigger button to toggle the modal window.

<a href="#great-modal" class="modal-trigger button">Show me the modal</a>

Active the modal and specify the trigger selector:

document.addEventListener('DOMContentLoaded', () => {
  const myMod = heyModal(document.querySelector('.modal-trigger'));
});

Open and close the modal window manually.

myMod.open();
myMod.close();

Events.

myMod.comp.wrapper.addEventListener('heyOpen', () => {
    console.log('open!');
});

myMod.comp.wrapper.addEventListener('heyClose', () => {
    console.log('close!');
});
  • Lahiru SupunChandra.

    How can I used multiple models using this ? Thanks

    • jayfreestone

      Hi Lahiru,
      You can see a simple example here: http://codepen.io/jayfreestone/pen/YNVPrv

      • Lahiru SupunChandra.

        Hello Jayfreestone

        Sir it’s working. Thank You very much. Appreciate your answer.

      • Ape

        Hi Jay, Im trying to use your script for multiple modals but isn’t working, your codepen example isnt working either, can you help me? thanks

        • jayfreestone

          Hi! It should still work as before. All you have to do is loop over them and initialise.

          The CodePen didn’t appear to be working as the path to the CSS changed. I’ve updated it and now it works as expected:

          http://codepen.io/jayfreestone/pen/YNVPrv

          • Ape

            Thank you very much!!