<!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)
