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;
}

我确定有更好的选择，但这至少应该让你现在开始，直到找到更好的解决方案。

添加关闭按钮灯箱

1 个答案: