javascript - 单击链接时关闭模式

Question

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

这是我的 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 显示 var 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>

谁能帮我解决这个问题？

非常感谢

Answer 1

试试这个。

添加关闭按钮

$(".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();
})