Question

我是jQuery的新手，我的Gallery Lightbox / Modal有问题。每次我单击缩略图时，整个模式都会再次打开，并且我不知道该在哪里设置重置。我很高兴听到您的答复。

jQuery(function($) {
 $('img').click(function() {
 var image = $(this).attr("src");
 var caption = $(this).attr("alt");

var appear_caption = "<figcaption id=appear_caption onClick='closeImage()'>"+caption+"</figcaption>"
var appear_image = "<div id='appear_image_div' onClick='closeImage()'></div>";
appear_image = appear_image.concat("<img id='appear_image' src='"+image+"'/>");
var thumbnails = $("thumbnails");

    $(".thumbnails").css("zIndex", "100");
    $(".thumbnails").css("display", "flex");
    $('body').append(appear_image);
    $('body').append(appear_caption);
  });
});

 function closeImage() {
 $('#appear_image_div').remove();
 $('#appear_image').remove();
 $('#appear_caption').remove();
 $(".thumbnails").css("display", "none");
};

Answer 1

单击图像时调用关闭，以便删除任何以前打开的Gallery Lightbox / Modal

jQuery(function($) {
 $('img').click(function() {
 closeImage();
 var image = $(this).attr("src");
 var caption = $(this).attr("alt");

var appear_caption = "<figcaption id=appear_caption onClick='closeImage()'>"+caption+"</figcaption>"
var appear_image = "<div id='appear_image_div' onClick='closeImage()'></div>";
appear_image = appear_image.concat("<img id='appear_image' src='"+image+"'/>");
var thumbnails = $("thumbnails");

    $(".thumbnails").css("zIndex", "100");
    $(".thumbnails").css("display", "flex");


    $('body').append(appear_image);
    $('body').append(appear_caption);
  });
});

 function closeImage() {
 $('#appear_image_div').remove();
 $('#appear_image').remove();
 $('#appear_caption').remove();
 $(".thumbnails").css("display", "none");
};

jQuery灯箱/模态难度会在点击时加倍

1 个答案: