JSFiddle - React, Tailwind, and code Playground

by Thomas Reedman

HTML

<button>Reserve Book</button>                                         
          
<div class="modal-box"></div>

CSS

button {border:0;padding:2px 5px;color:#fff;background:#aaa;cursor:pointer;}
.modal-box {
    position:fixed;
    top:50%;
    left:50%;
    width:300px;
    height:150px;
    margin-left:-150px;
    margin-top:-75px;
    display:none;
    background:#aaa;
    color:#fff;
    padding: 50px;
    box-sizing:border-box;
}

JavaScript

$('button').click(function() {

                result = "Test";

            $('.modal-box').text(result).fadeIn(300, function() {
                setTimeout(function() {
                    $('.modal-box').fadeOut();
                }, 1000);
            });
        });