JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/smoothness/jquery-ui.css">
<div id="mainContainer">
      I am in the main body section.               
    </div>
    <input type="button" value="Show Overlay" id="btn">        
    <div id="overlayContainer">
        I am in the Overlay Section
    </div>

CSS

#mainContainer{border:2px solid red;width:700px;height:500px;margin:0 auto;}
#overlayContainer{background:#c0c0c0;width:300px;height:400px;border:2px dotted blue;display:none;}
input{text-align:center;margin-left:300px;margin-top:18px;position:fixed;}

JavaScript

$(function() {
    $("#btn").click(function() {
        $("#overlayContainer").dialog({modal: true}).show();
    });
});