点击弹出窗口

最新推荐文章于 2018-07-11 23:45:42 发布

黄铜渣渣

最新推荐文章于 2018-07-11 23:45:42 发布

阅读量265

点赞数

分类专栏： css javascript

本文链接：https://blog.csdn.net/u014330950/article/details/74917152

版权

javascript 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

css

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>点击弹出div</title>
<link href="assets/css.css" rel="stylesheet" type="text/css" />
<style>
@charset "utf-8";
.tan {
	display:none;
	top:20%;
	left:50%;
	margin-left:-250px;
	padding:20px;
	width:500px;
	height:300px;
	position:relative;
	border:1px solid #ccc;
	border-radius:25px;/* 圆角边框 */
	-moz-border-radius:25px; /* 老的 Firefox */
	box-shadow: 10px 10px 5px #888888;/* 边框阴影 */
	-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
	z-index:1002;
	background-color:#FFF;
}
.close {
	width:38px;
	height:38px;
	position:absolute;
	background:url(https://img-blog.csdn.net/20170710141137823);
	background-size:38px 38px;
	-moz-background-size:38px 38px; /* 老版本的 Firefox */
	background-repeat:no-repeat;
	right:20px;
	top:20px;
	cursor:pointer;
	transition: transform 1s ease-out;
	-webkit-transition: -webkit-transform 1s ease-out;
	-moz-transition: -moz-transform 1s ease-out;
}
.close:hover {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	transform: rotate(180deg);
}
.gray {
	display:none;
	position:absolute;
	top:0%;
	left:0%;
	width:100%;
	height:100%;
	background-color:black;
	z-index:1001;
	-moz-opacity:0.2;
	opacity:.20;
	filter:alpha(opacity=20);
}

</style>
</head>
<body>
<a href="javascript:void(0)" class="dianji">点击我弹出一个窗口</a>

<div class="tan">
<span class="close"> </span>
我是窗口</div>
<div class="gray"></div>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){  
  $(".dianji").click(function(){  
    $(".tan").show(); 
	$(".gray").show(); 
  }); 
   $(".close").click(function(){  
    $(".tan").hide(); 
	$(".gray").hide(); 
  });  
   $(".gray").click(function(){  
    $(".tan").hide(); 
	$(".gray").hide(); 
  }); 
});  
</script>
</body>
</html>

$(selector).mouseover(function)

黄铜渣渣

关注

0
点赞
踩
0

收藏

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

点击弹出div@charset "utf-8";.tan { display:none; top:20%; left:50%; margin-left:-250px; padding:20px; width:500px; height:300px; position:relative; border:1px solid #ccc; border-radius:25px;
复制链接

扫一扫