javascript - 添加关闭按钮灯箱

Question

一段时间以来，我一直在尝试向该灯箱添加关闭按钮(右上角)，但没有成功。任何人都可以发送添加了关闭功能的工作 JSFiddle 或 Codepen 吗？

谢谢

http://codepen.io/stoypenny/pen/pJkcK

这是JS

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

$overlay.append($image);
$("#body").append($overlay);

$("#imageGallery  a").click(function(event){
  event.preventDefault();

  //Get image link
  var imageLocation = $(this).children().attr("src");
  //Add image source to the image
  $image.attr("src", imageLocation);
  //Set styles so that the image doesn't display at resolutions beyond the screen size
  $image.css({maxWidth: "70%", maxHeight: "70%", marginTop: "10%" });
  //Display the overlay
  $overlay.show();
});

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

Answer 1

这是您问题的快速解决方案，将其添加到您的 css 文件中:

#overlay:after {
  width: 40px;
  height: 40px;
  content: 'X';
  padding: 0;
  margin: 0;
  background: red;
  border-radius: 50%;
  color: #FFF;
  line-height: 40px;
  text-align: center;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

我确信有更好的选择，但这至少应该让你现在继续前进，直到你找到更好的解决方案。