点击前状态
点击后效果
html代码：
css:
.img-select img {
width: 500px;
height: 300px;
}
.dialog-bg {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.4);
}
.dialog-bg .img-box {
width: 1165px;
height: 650px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -582px;
margin-top: -340px;
}
.dialog-bg .img-box img {
width: 100%;
height: 100%;
}
js:
//无论点击哪一个img弹出层都会展示相应的图片。
$(".img-select").find("img").on("click", function () {
$(this).each(function () {
var $this = $(this);
var $img = $this.attr("src");//获取当前点击img的src的值
$("#img-box").find("img").attr("src", $img);//将获取的当前点击img的src赋值到弹出层的图片的src
$("#dialog-bg").show();//弹出层显示
});
});
//弹出层隐藏
$("#dialog-bg").on("click", function () {
$(this).hide();//
});