Simple Responsive Modal Written In Pure JavaScript – hey.js

Category: Javascript , Modal & Popup | September 19, 2018
Views Total:931 views
Official Page:Go to website
Last Update:September 19, 2018


Simple Responsive Modal Written In Pure JavaScript – hey.js


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>

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.comp.wrapper.addEventListener('heyOpen', () => {
myMod.comp.wrapper.addEventListener('heyClose', () => {


v1.1.5 (09/19/2018)

  • Minor tweaks to button organisation.

You Might Be Interested In:

6 thoughts on “Simple Responsive Modal Written In Pure JavaScript – hey.js

      1. Lahiru SupunChandra.

        Hello Jayfreestone

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

      2. 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


Leave a Reply