JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<button class="create-ui-button">
Create UI
</button>

CSS

.overlay{
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgba(0,0,0,0.6);
    z-index: 999999;
}
.overlay>div{
    max-width: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    max-height: 90%;
    overflow: auto;
    background-color: #fff;
    width: 100%;
    padding: 20px;
    font-family: helvetica;
    overflow-x: hidden;
}
.overlay>div>h1{
    margin: 0px;
    margin-bottom: 15px;
    color: #fff;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: normal;
    background-color: #2a2a2a;
    padding: 10px;
    padding-left: 12px;
    margin-left: -20px;
    margin-right: -20px;
    margin-top: -20px;
    line-height: 26px;
}
.overlay>div>h1>button.close-button{
    position: absolute;
    right: 5px;
    top: 5px;
    border: solid 1px #fff;
    background-color: transparent;
    color: #fff;
    padding: 7px;
    width: 31px;
    cursor: pointer;
}

JavaScript

// ADD CLICK HANDLER TO BUTTON THAT ALREADY EXISTS IN PAGE

$('button.create-ui-button').click(function(){

	// BUID THE OVERLAY ELEMENT
	var ui = $('<div class="overlay"><div><h1>Dan\'s Window<button class="close-button">X</button></h1></div></div>');
  
  // ADD CLICK HANDLER FOR THE CLOSE BUTTON
  ui.find('button.close-button').click(function(){
  
  	ui.remove();
  
  });
  
  $('body').append(ui);

});