CODEWITHSUNDEEP
javascriptjquerycss
samish
samish

Reputation: 63

Adding Close Button Lightbox

I've been trying to add a close button (top right) to this lightbox for sometime now with no success. Can anyone send a working JSFiddle or Codepen with the close functionality added?

Thank you

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

This is the 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();
});

Upvotes: 1

Views: 1100

Answers (1)

This Guy
This Guy

Reputation: 1726

Here is a quick solution to your issue, add this to your css file:

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

I'm sure there is a better alternative, but this should at least get you going for now until you find a better solution.

Upvotes: 2

Related Questions