Jquery 弹出窗口

最新推荐文章于 2024-03-09 21:19:43 发布

网络剑客

最新推荐文章于 2024-03-09 21:19:43 发布

阅读量569

点赞数

分类专栏： jQuery技术

本文链接：https://blog.csdn.net/dongsg11200/article/details/9254223

版权

jQuery技术专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base target="_blank">
<title>jq弹出</title>
<style>
body{padding:0px; margin:0px;}
.tc_bg{background:#000; width:100%; height:100%; z-index:500; top:0px; position:fixed; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;}
.tc_con{width:485px; height:265px; border:1px solid #ffc8c8; background:#fee1e1; position:fixed; z-index:10000; top:0px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$(".tc").hide();
	$(".but_fb").click(function(){
		 $(".tc").show();
	});
	$(".gb").click(function(){
		 $(".tc").hide();
	});
});	
</script>
</head>


<body>
<div class="but_fb">00000</div>
<!--弹出层-->
<div class="tc">
    <div class="tc_bg"></div>
    <div class="tc_con" id="tc_con">
        <img src="images/guanbi.jpg" width="18" height="18" class="gb" />
    </div> 
       <SCRIPT LANGUAGE="JavaScript">
       var a = document.getElementById("tc_con");
       a.style.left=(document.body.clientWidth/2-a.clientWidth/2)+"px";
       a.style.top=(document.documentElement.clientHeight/2-a.clientHeight/2)+"px";
       </SCRIPT>
</div>
</body>
</html>

网络剑客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery 弹出窗口

jq弹出body{padding:0px; margin:0px;}.tc_bg{background:#000; width:100%; height:100%; z-index:500; top:0px; position:fixed; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.
复制链接

扫一扫