JSFiddle - React, Tailwind, and code Playground

by adjit

HTML

<a class="viewPDF" href="#"><img alt="" src="https://www.metsales.com:443/MetropolitanSales//images//viewpdf.gif" style="Border:0px;"/></a>

<div class="pdfContainer">
    <a href="#"><img class="close" src="http://edge.coldwellbanker.com/images/agent/close_button.png" height="30" width="30"/></a>
    <iFrame class="thePDF" src="https://www.metsales.com/MetropolitanSales/prodInfo/pdf//posiflex/xt4015.pdf"></iFrame>
</div>

CSS

.displayer{
    display: table !important;
    position: absolute;
    background: rgba(64,64,64,.64);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.pdfContainer {
    display: none;
}

.thePDF {
    height: 80%;
    width: 80%;
}

.close {
   top: 0;
}

JavaScript

$('.viewPDF').click(function(){
   $('.pdfContainer').addClass('displayer'); 
});
$('.close').click(function(){
   $('.pdfContainer').removeClass('displayer'); 
});