html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>效果图</title>
<link rel="stylesheet" href="css/demo.css">
<script src="js/jquery-1.8.2.js"></script>
<script src="js/demo1.js"></script>
</head>
<body>
<div class="main">
<div class="content">
<div class="content-list root">
<div class="list-t"><img src="img/photo2.png"></div>
<div class="list-b">
<div class="text1">
<span class="enroll">设计图片</span>
<span class="see">查看</span>
</div>
<div class="text2">
<span>设计价:10.00元</span>
<span>模板收入:0次</span>
</div>
</div>
</div>
<div class="content-list root">
<div class="list-t"><img src="img/photo2.png"></div>
<div class="list-b">
<div class="text1">
<span class="enroll">设计图片</span>
<span class="see">查看</span>
</div>
<div class="text2">
<span>设计价:10.00元</span>
<span>模板收入:0次</span>
</div>
</div>
</div>
<div class="content-list root">
<div class="list-t"><img src="img/photo2.png"></div>
<div class="list-b">
<div class="text1">
<span class="enroll">设计图片</span>
<span class="see">查看</span>
</div>
<div class="text2">
<span>设计价:10.00元</span>
<span>模板收入:0次</span>
</div>
</div>
</div>
</div>
</div>
<div class="bg"></div>
<div class="popupbox">
<div class="btn3"><img src="img/btn3.png"></div>
<div class="text">您要查看该模块?</div>
<div class="box">
<img src="img/btn1.png" class="ok">
<img src="img/btn2.png" class="cancel">
</div>
</div>
</body>
</html>
css:
html,body{
100%;
height:100%;
font-size:14px;
font-family:"Microsoft YaHei";
margin: 0;
padding: 0;
}
.main {
100%;
height:100%;
position: absolute;
z-index: 1;
}
.content {
max- 1000px;
margin:0 auto;
}
.content .content-list{
210px;
float:left;
margin: 0 10px;
}
.content .content-list .list-t {
100%;
height:210px;
background:#ff6600;
text-align:center;
border-left:2px solid #ff6600;
border-right:2px solid #ff6600;
}
.content .content-list .list-t img {
90%;
height:100%;
}
.content .content-list .list-b{
100%;
background:#fff;
margin:0 auto;
border:2px solid #fff;
border-top: none;
}
.content .content-list .list-b .text1 {
border-bottom:2px dashed #dbd8d2;
margin:0 auto;
padding: 10px;
}
.content .content-list .list-b .text1 .enroll{
font-weight:bold;
color:#ff6600;
}
.content .content-list .list-b .text1 .see{
float:right;
cursor:pointer;
color:#555352;
display:none;
}
.content .content-list .list-b .text2 {
color:#999;
text-align:center;
padding:5px;
}
.content .content-list .list-b:hover {
border: 2px solid #f60;
border-top:none;
background: #f5f5f5;
}
.bg {
100%;
height:100%;
z-index:9;
position:absolute;
background:rgba(0,0,0,.4);
display:none;
}
.popupbox{
position:absolute;
z-index:99;
300px;
height:120px;
background:#fff;
border:10px solid #555352;
display:none;
}
.popupbox .btn3 {
float:right;
margin:5px;
cursor:pointer;
}
.popupbox .text{
font-size:18px;
color:#666;
line-height:80px;
text-align:center;
}
.popupbox .box {
text-align:center;
}
.popupbox .box .ok {
margin-right:20px;
cursor:pointer;
}
.popupbox .box .cancel {
cursor:pointer;
}
js:
var obj ={
init:function() {
this.bind();
this.popup();
},
bind:function() {
//移入显示查看，反之隐藏
$(".content .list-b").hover(function() {
$(this).find(".see").show();
},function() {
$(this).find(".see").hide();
});
//单击查看显示弹层
$(".see").click(function() {
$(".bg, .popupbox").show();
//$(".bg").show();
});
//单击取消/关闭隐藏弹层
$(".btn3, .cancel").click(function() {
$(".bg, .popupbox").hide();
//$(".bg").show();
});
},
popup:function() {
var box = $(".popupbox");
var _width = document.body.clientWidth;
var _height = document.body.clientHeight;
var $width = (_width-box.width())/2;
var $height =(_height-box.height())/2;
box.css({'left':$width,'top':$height});
}
}
$(function() {
obj.init();
//移入显示查看，反之隐藏
/*$(".content .list-b").hover(function() {
$(this).find(".see").show();
},function() {
$(this).find(".see").hide();
});
//单击查看显示弹层
$(".see").click(function() {
$(".bg, .popupbox").show();
//$(".bg").show();
});
//单击取消/关闭隐藏弹层
$(".btn3, .cancel").click(function() {
$(".bg, .popupbox").hide();
//$(".bg").show();
});
popup();
function popup() {
var box = $(".popupbox");
var _width = document.body.clientWidth;
var _height = document.body.clientHeight;
var $width = (_width-box.width())/2;
var $height =(_height-box.height())/2;
box.css({'left':$width,'top':$height});
};*/
})