JSFiddle - React, Tailwind, and code Playground
HTML
<button id="mybutt">Show Modal</button>
<button id="yourbutt">Different Content</button>
<div id="myOverlay"></div>
<div id="myModal">
<img src="http://placekitten.com/450/325" />
<input type="button" id="shutme" value="Close" />
</div>
<div id="content">
This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content.
</div>
CSS
#content{background:wheat;}
#myOverlay{position:fixed;top:0;left:0;height:100%;width:100%;background:black;opacity:0.7;display:none;z-index:1;}
#myModal{position:fixed;top:10%;left:10%;border:3px solid darkcyan;display:none;z-index:2;}
#shutme{position:absolute;right:20px;bottom:20px;}
JavaScript
$('#mybutt').click(function(){
$('#myOverlay').show();
$('#myModal').show();
});
$('#yourbutt').click(function(){
$.ajax({
type: 'post',
url: 'your_php_processor_file.php',
data: 'elementID=' +myId,
success: function(mydata){
$('#myModal').html(mydata);
$('#myOverlay').show();
$('#myModal').show();
}
});
});
$('#shutme, #myOverlay').click(function(){
$('#myModal').hide();
$('#myOverlay').hide();
$('#myModal').html('<img src="http://placekitten.com/450/325" />');
});