JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<button id="showDialog">Show The Dialog</button>

<div id="dialog" style="display:none;">
    <h1>Thank You</h1>
    <p>Your email has been sent</p>
</div>

CSS

#dialog { text-align:center; }
.custom-overlay { background-color: black; background-image: none; opacity: 0.3; }

JavaScript

$(document).ready(function() {
	$('#showDialog').click(function(e){
  	  $('#dialog').dialog({
    	    modal: true, 
      	  open: function() {
            $('.ui-widget-overlay').addClass('custom-overlay');
        	},
        	close: function() {
            $('.ui-widget-overlay').removeClass('custom-overlay');
        	}
    	});
	});
});