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

您应该可以使用以下代码：

   //if you want the modal to close when clicking on the modal itself:
    $("#modal_inner").on("click", function(){
           $(this).fadeOut();
    });
    //if you want the modal to close when clicking on the close button ie <div id="modal_close">CLOSE</div>:
    $("#modal_close").on("click", function(){
           $("#modal_inner").fadeOut();
    });

您可以添加指向html标记的链接

<div id="modal_inner">
  <div id="modal_close">CLOSE</div>
  <a href="javascript:void(0);">My Link to Close the modal</a>
</div>

然后执行以下操作：

$("#modal_inner a").on("click", function(){
   $("#modal_inner").fadeOut();
});

Answer 2

试试这个。

添加关闭按钮

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

Answer 3

这样的事情会起作用：

$(".mix.photos").on("click", function () {
    var img = $(this).children("img").data("imagefull");
    $modal = $("#modal_inner").find('.image').html("<img src='" + img + "' />").end()
    .fadeIn(function() {
        var self = this;
        $(this).on('click', '#modal_close', function() {
            $modal.off().hide();
        });
    });
});

您还可以将关闭事件委派给document对象，但即使隐藏叠加层，我也不希望检查所有点击。

单击链接时关闭模式

3 个答案:

演示：http://jsfiddle.net/PG2Z8/