我在网站上使用一种模式叠加层,以在单击缩略图时显示完整尺寸的图像。

这是我的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();
})

10-05 20:27
查看更多