JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<input type="button" value="show" id="show"/>
</div>
Text textText textText textText textText textText text
CSS
#fade {
display: none;
background: black;
opacity:0.4;
filter:alpha(opacity=50);
z-index: 1;
position: fixed;
left: 0; top: 0;
width: 100%; height: 100%;
}
#window {
width: 440px;
height: 356px;
background: white;
position:fixed;
left:50%;
top:30%;
margin:-70px 0 0 -245px;
z-index: 2;
}
JavaScript
$(document).ready( function() {
$('#show').click( function() {
$("<div id='fade'></div>").appendTo('body');
$('#fade').fadeIn('fast');
});
$(document).on("click","#fade", function() {
$('#fade').remove();
});
});