弹出浮动窗口
QQ图片20161010013757.png
QQ图片20161010013802.png
<p>透明度没有设置好。。。就这样吧 ！
<p>代码部分
<pre><html >
<head>
<meta charset="UTF-8">
<meta name="Author" content="一只猪">
<title>Document</title>
<style>
body{
margin:0px;padding:0px;
}
.pic{
width:100%;
height:100%;
border:none;
position:absolute;
left:0;
top:0;
z-index:-1;
}
k{
position:absolute;
width:200px;
height:35px;
top:25px;
left:100px;
border:none;
cursor:pointer;
background:black;
font-size:20px;
color:white;
}
fudong{
width:100%;
height:100%;
background:#ccc;
opacity:0.3;
position:absolute;
top:0px;
left:0px;
z-index:0;
}
fd{
width:300px;
height:300px;
background:blue;
position:absolute;
top:150px;
left:350px;
}
.bt{
width:100%;
height:20px;
background:orange;
}
kg{
padding:2px 3px 0px 6px;
width:10px;
position:relative;
float:right;
background:red;
color:white;
}
kg>span{
cursor:pointer;
}
</style>
</head>
<body>
<div id="fudong"style="display:none">
<div id="fd">
<div class="bt">
<div id="kg"><span>X</span>
</div>
</div>
<img src="4.jpg" style="width:300px;height:290px;">
</div>
</div>
<img src="4.jpg" class="pic">
<input type="button"value="点击有惊喜"id="k"/>
<script>
var k=document.getElementById("k")
var fudong=document.getElementById("fudong")
var kg=document.getElementById("kg")
k.onclick=function(){
fudong.style.display="block"
}
kg.onclick=function(){
fudong.style.display="none"
}
</script>
</body>
</html>
网友评论