JSFiddle - React, Tailwind, and code Playground

by adjit

HTML

<a class="viewPDF" data-frame=".pdfFrame"><img src="https://www.metsales.com:443/MetropolitanSales//images//viewpdf.gif"/></a>

<div id="frameContainer" style="display: none;"> <a id="frameClose"><img height="30" src="../posiflex/images/close_button.png" width="30"/></a>  <span id="altFrameView">Having problems viewing this window? Click <a href="" id="altFrameLink" target="_blank">Here</a></span>
</div>
<iframe class="pdfFrame frame" data-link="../posiflex/pdfs/KS6715.pdf" src="../posiflex/pdfs/KS6715.pdf" style="display: none;" scrolling="no">Sorry iFrame is not supported by your browser.</iframe>

CSS

#loading {
    background:url(https://www.metsales.com/MetropolitanSales/microsite/images/loading.gif) no-repeat center center;
    height: 100px;
    width: 100px;
    position: fixed;
    z-index: 2000;
    left: 50%;
    top: 50%;
    margin: -25px 0 0 -25px;
    display: none;
}

#frameClose {
	position: relative;
	float: left;
}

#altFrameView {
	color: white;
	position: relative;
	display: block;
	float: left;
	z-index: 2000;
}

#frameContainer {
	/*display: table !important;*/
    position: fixed;
    background: rgba(64,64,64,.64);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
	cursor: pointer;
}

.frame {
	position: fixed;
	display: block;
	z-index: 900;
    height: 95%;
    width: 60%;
	top: 50%;
	left: 50%;
	margin-left: 0px;
	margin-top: 0px;
	overflow-y: hidden;
	background: rgba(64,64,64,1) !important;
}

JavaScript

$('.viewDrivers, .viewPDF').click(function(){
	var frame = $(this).attr("data-frame");
	var link = $(frame).attr("data-link");
	var wHeight = $(window).height()*.95;
	var wWidth = $(window).width()*.6;
	
	$('#altFrameLink').attr("href", link);
	
	$(frame).css({'margin-top' : wHeight/-2});
	$(frame).css({'margin-left' : wWidth/-2});
	
	$('#loading').show();
	$('#frameContainer').show();
	
	if(!$(frame).attr("src")){
		$(frame).attr("src", link);
		if($.browser.msie){
			$(frame).show(1500, function () {
				$('#loading').hide();
			});
		} else {
			$(frame).show(1500);
			$(frame).load(function () {
				$('#loading').hide();
			});
		}
	} else {
		$(frame).show(1500, function() {
			$('#loading').hide();
		});
	}
});

$('#frameContainer, #frameClose').click(function(){
	$('#frameContainer').hide();
	$('.frame').hide();
});