JSFiddle - React, Tailwind, and code Playground

by adjit

HTML

<div>THIS IS PAGE CONTENT<button type="button">Show PDF</button></div>
<div class="backgroundFade" style>
    <iFrame class="pdfViewer" src="https://www.metsales.com/MetropolitanSales/prodInfo/pdf//posiflex/xt4015.pdf"></iFrame>
</div>

CSS

.backgroundFade {
    display: none;
}

.showPDF {
    position: absolute;
    display: table;
    background: rgba(123,123,123,.65);
    top: 0;
    width: 100%;
    height: 100%;
}

.pdfViewer {
    position: relative;
    width: 75%;
    height: 75%;
    margin: 0px auto;
}

JavaScript

$(button).click(function(){
    $('.backgroundFade').toggleClass('showPDF');
}