JSFiddle - React, Tailwind, and code Playground

by hunterloftis

HTML

<button id='startModal'>Hello</button>

<div id='modalContainer'>
    <div class='modal' id='helloModal'>
        <p>Hello, world!</p>
        <button class='closeModal'>close</button>
    </div>
</div>

CSS

#modalContainer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
}

.modal {
    position: fixed;       
    z-index: 1050;
    background: #fff;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -200px;
    width: 400px;
    height: 400px;
    display: none;
}

#modalContainer.active, .modal.active {
    display: block;
}

JavaScript

$('#startModal').on('click', function() {
    $('.modal').removeClass('active');
    $('#helloModal').addClass('active');
    $('#modalContainer').addClass('active');
});

$('.closeModal').on('click', function() {
    $('#modalContainer').removeClass('active');     
});