modal.js

/* Moshe's first library */

(function () {
    function Modal(title, message) {
        const that = this;
        that.title = title;
        that.message = message;
        function init() {
            const body = document.querySelector('body');
            // Main Div
            const mainDiv = document.createElement('div');
            addClass(mainDiv, 'modal');
            addClass(mainDiv, 'fadeModal');
            addClass(mainDiv, 'hiddenModal');
            mainDiv.id = 'myModal';

            // Inner Div
            const innerDiv = document.createElement('div');
            innerDiv.id = 'myContent';

            // Modal Header
            const modalHeader = document.createElement('div');
            addClass(modalHeader, 'modal-header');

            const closeModal = document.createElement('span');
            addClass(closeModal, 'closeModal');
            closeModal.innerHTML = `×`;

            const modalTitle = document.createElement('h4');
            addClass(modalTitle, 'modal-title');
            modalTitle.innerHTML = 'Server Message';

            // Modal Body
            const modalBody = document.createElement('div');
            addClass(modalBody, 'modal-body');

            const modalContent = document.createElement('p');
            addClass(modalContent, 'text-center');
            modalContent.innerHTML = 'PlaceHolder';

            // Appending
            modalBody.appendChild(modalContent);
            modalHeader.appendChild(closeModal);
            modalHeader.appendChild(modalTitle);
            innerDiv.appendChild(modalHeader);
            innerDiv.appendChild(modalBody);
            mainDiv.appendChild(innerDiv);
            body.appendChild(mainDiv);

            // Returning
            that.modalContent = innerDiv;
            that.modal = mainDiv;
            that.modalCloseBtn = closeModal;
            that.modalTitle = modalTitle;
            that.modalBody = modalContent;

            that.show(that.title, that.message);

            // Handle close
            // When the user clicks anywhere outside of the modal, close it
            window.addEventListener('click', (event) => {
                if (event.target == modal) {
                    that.close();
                }
            });
        }
        init();
    }

    // Helper functions
    const createEvent = function (name) {
        var evt;

        if (!window.CustomEvent || typeof window.CustomEvent !== 'function') {
            evt = document.createEvent('CustomEvent');
            evt.initCustomEvent(name, false, false, undefined);
        } else {
            evt = new CustomEvent(name);
        }

        return evt;
    };
    const addClass = function (el, className) {
        if (el.classList) el.classList.add(className);
        else if (!hasClass(el, className)) el.className += ' ' + className;
    };
    const hasClass = function (el, className) {
        return el.classList ? el.classList.contains(className) : new RegExp('\\b' + className + '\\b').test(el.className);
    };
    const removeClass = function (el, className) {
        if (el.classList) el.classList.remove(className);
        else el.className = el.className.replace(new RegExp('\\b'+ className+'\\b', 'g'), '');
    };

    // Prototype

    Modal.prototype.show = function (title, message) {
        const that = this;
        if (!message) {
            message = title;
            title = 'Server Message';
        }
        // title = title || 'Server Message';
        that.modalTitle.innerHTML = title;
        that.modalBody.innerHTML = message;
        addClass(that.modalContent, 'modal-content');
        removeClass(that.modalContent, 'modal-content-close');
        removeClass(that.modal, 'hiddenModal');
        addClass(that.modal, 'shownModal');

        that.modal.dispatchEvent(createEvent('modalOpen'));
    };
    Modal.prototype.close = function () {
        const that = this;
        addClass(that.modalContent, 'modal-content-close');
        removeClass(that.modalContent, 'modal-content');
        removeClass(that.modal, 'shownModal');
        addClass(that.modal, 'hiddenModal');
        that.modal.dispatchEvent(createEvent('modalClose'));
    };
    Modal.prototype.on = function (event, handler) {
      this.modal.addEventListener(event, handler);
    };

    // Export
    if (typeof module !== 'undefined' && module.exports) {
        module.exports = Modal;
    } else {
        window.Modal = Modal;
    }
})();

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .hiddenModal {
            visibility: hidden;
            opacity: 0;
        }

        .shownModal {
            visibility: visible;
            opacity: 1;
        }

        .fadeModal {
            -webkit-transition-property: opacity, visibility;
            -webkit-transition-duration: 0.4s;
            -webkit-transition-timing-function: ease-in-out;
            transition-property: opacity, visibility;
            transition-duration: 0.4s;
            transition-timing-function: ease-in-out;
        }

        /* Animation function */
        /* The Modal (background) */
        .modal {
            /*display: none; !* Hidden by default *!*/
            position: fixed;
            /* Stay in place */
            z-index: 1;
            /* Sit on top */
            padding-top: 20px;
            /* Location of the box */
            left: 0;
            top: 0;
            width: 100%;
            /* Full width */
            height: 100%;
            /* Full height */
            overflow: auto;
            /* Enable scroll if needed */
        }

        /* Modal Content */
        .modal-content {
            position: relative;
            background-color: #fefefe;
            margin: auto;
            padding: 0;
            width: 20%;
            border: 1px solid rgba(0, 0, 0, 0.2);
            border-radius: 6px;
            -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
            -webkit-animation-name: animatetop;
            -webkit-animation-duration: 0.4s;
            animation-name: animatetop;
            animation-duration: 0.4s;
        }

        .modal-content-close {
            position: relative;
            background-color: #fefefe;
            margin: auto;
            padding: 0;
            width: 20%;
            border: 1px solid rgba(0, 0, 0, 0.2);
            border-radius: 6px;
            -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
            -webkit-animation-name: animatetopclose;
            -webkit-animation-duration: 0.4s;
            animation-name: animatetopclose;
            animation-duration: 0.4s;
        }

        /* Animation functions */
        /* Add Animation - Open */
        @-webkit-keyframes animatetop {
            from {
                top: -300px;
                opacity: 0;
            }
            to {
                top: 0;
                opacity: 1;
            }
        }

        @keyframes animatetop {
            from {
                top: -300px;
                opacity: 0;
            }
            to {
                top: 0;
                opacity: 1;
            }
        }

        /* Add Animation - Close */
        @-webkit-keyframes animatetopclose {
            from {
                top: 0;
                opacity: 1;
            }
            to {
                top: -300px;
                opacity: 0;
            }
        }

        @keyframes animatetopclose {
            from {
                top: 0;
                opacity: 1;
            }
            to {
                top: -300px;
                opacity: 0;
            }
        }

        /* The Close Button */
        .closeModal {
            opacity: .2;
            float: right;
            font-size: 28px;
            font-weight: bold;
            margin: -2px;
            line-height: 1;
        }

        .closeModal:hover,
        .closeModal:focus {
            opacity: .5;
            text-decoration: none;
            cursor: pointer;
        }

        .modal-header {
            padding: 15px;
            border-bottom: 1px solid #e5e5e5;
        }

        .modal-body {
            padding: 15px;
        }
    </style>
</head>

<body>

<script src="modal.js"></script>
<script src="test.js"></script>
</body>
</html>

test.js

const modal = new Modal('world');

// setTimeout(() => {
//     modal.close();
// }, 3000);

modal.on('modalClose', () => {
    console.log('closed');
});

modal.on('modalOpen', () => {
    console.log('opened');
});