我在网站上使用一种模式叠加层,以在单击缩略图时显示完整尺寸的图像。
这是我的JS:
$(".mix.photos").on("click", function(){
var img = $(this).children("img").data("imagefull");
$("#modal_inner").html("<img src='"+img+"' />");
$("#modal_inner").fadeIn();
})
.mix.photos是我的包含img的div。
当单击.mix.photos时,它会阻止我的#modal_inner显示img图像。 (完整尺寸图片的src在我的.data(“ imagefull”)中。
它的效果很好,但是我试图添加一个链接以在单击它时关闭#modal_inner。
这是我的CSS:
#modal_inner{
width: 847px;
height: 374px;
position: absolute;
top: 0px;
left: 0px;
padding-left: 120px;
background-color:rgba(187, 187, 187, 0.8);
display: none;
padding-top: 10px;
z-index: 1000;}
和我的HTML:
<div id="modal_inner">
<div id="modal_close">CLOSE</div>
</div>
有人可以帮我吗?
非常感谢
最佳答案
尝试这个。
添加关闭按钮
$(".mix.photos").on("click", function(){
var img = $(this).children("img").data("imagefull");
$("#modal_inner").html("<img src='"+img+"' />");
$("#modal_inner").fadeIn();
$('<div id="modal_close">CLOSE</div>').appendTo('#modal_inner');
});
关闭功能
$(document).on('click','#modal_close',function(){
$('#modal_inner').empty().fadeOut();
})