浏览器中打开PDF链接 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>浏览器打开PDF</title>
		<style type="text/css">
			.lightbox {
				position: fixed;
				top: 0px;
				left: 0px;
				height: 100%;
				width: 100%;
				z-index: 7;
				opacity: 0.3;
				display: block;
				background-color: rgb(0, 0, 0);
				display: none;
			}
			
			.pop,
			iframe {
				position: absolute;
				left: 50%;
				top: 0;
				width: 893px;
				height: 100%;
				margin-left: -446.5px;
				z-index: 9;
			}
		</style>
		<script src="pdf.js"></script>
		<script type="text/javascript">
			function showPdf(isShow) {
				var state = "";
				if(isShow) {
					state = "block";
				} else {
					state = "none";
				}
				var pop = document.getElementById("pop");
				pop.style.display = state;
				var lightbox = document.getElementById("lightbox");
				lightbox.style.display = state;
			}

			function close() {
				showPdf(false);
			}
		</script>
	</head>

	<body>
				<center><a href="introduce.pdf" target="pdfContainer" onclick="showPdf(true)">打开PDF</a></center>
		<div class="lightbox" id="lightbox"></div>
		<div id="pop" class="pop" style="display: none;">
			<a href="javascript:close()" style="
		    position: absolute;
		    right: -90px;
		    display: inline-block;
		    width: 80px;
		    height: 30px;font-size: 28px;font-weight: bold;color: black;top:150px;
		" id="close">关闭</a>
			<iframe src="" frameborder="0" id="pdfContainer" name="pdfContainer"></iframe>
		</div>
	</body>

</html>

　　

posted @ 2017-08-21 16:49  Gemini—Boy  阅读(971)  评论(0)  编辑  收藏  举报