JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<a class="showModal" href="javascript:void(0);">show modal</a>

CSS

body {
    position: relative;
    margin: 0;
    /* reset margin */
    padding: 0;
    /* reset padding */
}
.modalShow .modalContent {
    opacity: 1;
    overflow':'hidden';
 -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
    margin-top: 30px;
}
.modalOverlay {
    display: none;
    overflow: auto;
    overflow-y: scroll;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    background-color: #2d2d2d;
    background-color: rgba(45, 45, 45, 0.2);
}
.modalContent {
    width: 50%;
    height: auto;
    background-color: #FFFFFF;
    margin-top: 0;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.modalInner {
    padding: 20px;
}

JavaScript

var Modal = function (options) {
    var self = this; // concrete this reference for instance members
    
    self.width = 0;
    self.height = 0;
    self.backgroundColor = "";
    self.overlayColor = "";
    self.url = "";
    self.showOverlay = false;

    // Fill properties based on the options
    if (typeof options != 'undefined' && options != undefined && options != null) {
        self.width = options.width; // a percentage based number %
        self.height = options.height; // optional, usually needs not to be set
        self.backgroundColor = options.backgroundColor; // set the background colour to the modal
        self.overlayColor = options.overlayColor; // as hex, to be converted to rgba
        self.url = options.url;
        self.showOverlay = options.showOverlay;
    }

    var buildModal = function () {
        var modalOverlay = document.createElement('div'),
            modalContent = document.createElement('div'),
            modalInner = document.createElement('div');

        // build html structure
        modalOverlay.className = "modalOverlay";
        modalContent.className = "modalContent";
        modalOverlay.appendChild(modalContent);
        modalInner.className = "modalInner";
        modalContent.appendChild(modalInner);

        // add new html structure to body
        document.body.appendChild(modalOverlay);
    };

    self.createModal = function () {
        // create elements to add classes to and insert in to dom
        buildModal();
        // apply theme
        self.applyTheme();
        // load content
        self.loadContent();
    }

    self.applyTheme = function () {

        // is there a background color?
        var overlayBgColor = self.showOverlay ? convertHex(self.overlayColor, 50) : "transparent";

        $('.modalOverlay').css({
            'background-color': overlayBgColor
        });

        $('.modalContent').css({
            'background-color': self.backgroundColor,
                'width':...