JSFiddle - React, Tailwind, and code Playground

by Tarek Faham

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<div class="area">
    <button class="blocktest">Click me if you can</button>
</div>
<div class="area coverme">
    <button class="blocktest">Click me if you can</button>
    <button class="showdialog">Show dialog</button>
</div>
<div class="dialog">
    Dialog test.
</div>

CSS

.area {
  margin: 10px;
  padding: 60px 20px 60px 20px;
  background-color: whitesmoke;
  border: 1px solid silver;
  position: relative;
  border: red 1px solid;
}

.dialog {
  background-color: green !important;
}

JavaScript

$(function(){
    $('.dialog').dialog({
        autoOpen: false,
        modal: false,
        open: function(){
            $(document.body).append('<div class="ui-widget-overlay"></div>');
        },
        close: function(){
            $(document.body).find('.ui-widget-overlay').remove();
        }        
    }).hide();
    
    $('.blocktest').click(function(){
        alert("Clicked");
    });
    
    $('.showdialog').click(function(){
        $('.dialog').dialog("open");
    });
});