JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
<button class=dialog-opener data-dialog=#myDialog>Open Dialog</button>

<div id=myDialog class=dialog>
    Here's a simple dialog with a datepicker.
    <input type=text class=datepicker>
</div>

CSS

.dialog {
    position: absolute;
    padding: 20px;
    background: #aaa;
    display: none;
    z-index: 999;
    border-radius: 10px;
    box-shadow: 5px 5px 1em #CCC;
}
.overlay {
   
    width: 100%;
    height: 100%;
    z-index: 998;
}

JavaScript

$('.dialog-opener').click(function (e) {
    // Find out which dialog this click should open.
    var dialogSelector = $(e.target).data('dialog');
    
    // We only care if the dialog is not already open.
    if ($(dialogSelector).is(':not(:visible)')) {
        
        // Show the dialog.
        $(dialogSelector).show();
        
        // Add an overlay div to catch any clicks not inside the dialog.
        $('body').prepend('<div class=overlay></div>');
        
        // If the overlay is clicked, hide the dialog and remove the overlay.
        $('.overlay').click(function () {
            $(dialogSelector).hide();
            $('.overlay').remove();
        });
    }
});

// Initialize datepicker for demonstration only.
$('.datepicker').datepicker();