为什么我的覆盖在被点击时不退出？

Question

所以我今天在我的网站上做了一些更新，并删除了我的叠加层的标题。我觉得我不需要它。我暂时注释掉了上述代码，以测试我是否喜欢它。我只喜欢没有文字的图像叠加层，但现在我无法通过再次单击它来退出叠加层。为什么是这样？这是我的 repo 代码源。下面也是我的js代码。

/*************************************************************
            Gallery Lightbox On Stories Page
**************************************************************/

//Problem: User when clicking on image goes to a dead end
//Solution: Create an overlay with the large image - Lightbox

var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
// var $caption = $("<p></p>");

// An image to overlay
$overlay.append($image);

// A caption to overlay
// $overlay.append($caption);

// Add overlay
$("body").append($overlay);

// Capture the click event on a link to an image
$(".gallery a").click(function(event){
  event.preventDefault();
  var imageLocation = $(this).attr("href");
  // Update overlay with the image linked in the link
  $image.attr("src", imageLocation);

  // Show the overlay.
  $overlay.show();


  // Get child's alt attribute and set caption
//  var captionText = $(this).children("img").attr("alt");
//  $caption.text(captionText);
// }); 

// When overlay is clicked
$overlay.click(function(){
  // Hide the overlay
  $overlay.hide();
});

/*************************************************************
           Hide Email Using Javascript To Avoid Spam 
**************************************************************/
//var parts = ["lpstories", "yahoo", "com", "&#46;", "&#64;"];
//var email = parts[0] + parts[4] + parts[1] + parts[3] + parts[2];
//document.getElementById("email").innerHTML=email;

Answer 1

您在标签中将图像路径用作 href。请改用数据属性。
在 $overlay.show()

})

使用此代码。

    /*************************************************************
            Gallery Lightbox On Stories Page
**************************************************************/

//Problem: User when clicking on image goes to a dead end
//Solution: Create an overlay with the large image - Lightbox

var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
// var $caption = $("<p></p>");

// An image to overlay
$overlay.append($image);

// A caption to overlay
// $overlay.append($caption);

// Add overlay
$("body").append($overlay);

// Capture the click event on a link to an image
$(".gallery a").click(function(event){
event.preventDefault();
var imageLocation = $(this).attr("data-href");
// Update overlay with the image linked in the link
$image.attr("src", imageLocation);

// Show the overlay.
$overlay.css("display","flex");

});
// Get child's alt attribute and set caption
//  var captionText = $(this).children("img").attr("alt");
//  $caption.text(captionText);
// }); 

// When overlay is clicked
$overlay.click(function(){
// Hide the overlay
$overlay.hide();
});

/*************************************************************
        Hide Email Using Javascript To Avoid Spam 
**************************************************************/
//var parts = ["lpstories", "yahoo", "com", "&#46;", "&#64;"];
//var email = parts[0] + parts[4] + parts[1] + parts[3] + parts[2];
//document.getElementById("email").innerHTML=email;

它还在弹出窗口中将图像居中。

这是相同的工作 fiddle。

如果您不想在点击图片时关闭弹出窗口，请添加此项。

$overlay.find("img").click(function(e){
 e.stopImmediatePropagation();
});

为什么我的覆盖在被点击时不退出？

Why is my overlay not exiting when being clicked on?

javascript

jquery

overlay

function

lightbox