纯js+css实现页面弹出div

最新推荐文章于 2018-10-01 17:19:50 发布

tianxin_132021

最新推荐文章于 2018-10-01 17:19:50 发布

阅读量730

点赞数

分类专栏： javascript 文章标签：弹窗

本文链接：https://blog.csdn.net/tianxin_132021/article/details/32717813

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<span style="font-family: Arial, Helvetica, sans-serif;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></span>

<html>
	<head>
	<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
	<style type="text/css">
	    .mydiv
	    {
	        text-align: center;font-size: 9pt;z-index: 99;width:500px;height:300px;left: 50%;top: 50%;
	        margin-left: -250px !important;margin-top: -150px !important;margin-top: 0px;position: fixed !important;
	        position: absolute;
	        _top: expression(eval(document.compatMode && 
	            document.compatMode=='CSS1Compat') ? 
	            documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/ 
	            document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); /*IE5 IE5.5*/
	    }
	    .SContent-box
	    {
	        width:500px;
	        height:300px;
	        background:red;
	    }
	    .bg
	    {
	        background-color: #666;
	        width: 100%;
	        height: 100%;
	        left: 0;
	        top: 0;
	        filter: alpha(opacity=50);
	        opacity: 0.5;
	        z-index: 1;
	        position: fixed !important; /*FF IE7*/
	        position: absolute;
	        _top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? 
	            documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/ 
	            document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); /*IE5 IE5.5*/
	    }
	</style>
	<script language="javascript" type="text/javascript">
	    var Itemindex = 0;
	    function showDiv() {
	        document.getElementById('popDiv').style.display = 'block';
	        document.getElementById('bg').style.display = 'block';       
	    }
	    function closeDiv() {
	        document.getElementById('popDiv').style.display = 'none';
	        document.getElementById('bg').style.display = 'none';
	    }
	</script>
	</head>
	<body>
		<div οnclick="showDiv()" style="display:block; cursor:pointer">
		    点击弹出div
		</div>
		<div id="popDiv" class="mydiv" style="display: none;">
		
		    <div class="SContent-box">
		        <div class="Close_btn">
		             <a href="javascript:;" οnclick="closeDiv()"  style="display:block; cursor:pointer">点击关闭</a>
		        </div>
		        
		    </div>
		</div>
		<div id="bg" class="bg" style="display: none;">
		</div>
	</body>
</html>