I have a an image that when you click, this function runs.

function img(num) {
    var src = "images/main" + num + ".jpg";
    document.getElementById("popover-image").src = src;
    $("#sheet").css("display", "block");
}

When you click on the "X" (image), this function runs:

function close() {
    $("#sheet").css("display", "none");
}

but it doesn't work.

Here is how my image is set up:

<img src="images/x.png" alt="Exit" onclick="close()" />

I have a an image that when you click, this function runs.

function img(num) {
    var src = "images/main" + num + ".jpg";
    document.getElementById("popover-image").src = src;
    $("#sheet").css("display", "block");
}

When you click on the "X" (image), this function runs:

function close() {
    $("#sheet").css("display", "none");
}

but it doesn't work.

Here is how my image is set up:

<img src="images/x.png" alt="Exit" onclick="close()" />

• javascript
• jquery
• css

• 7 How do you call that function? And why don't you use .hide() and .show() instead of those .css() calls? And why do you mix vanilla DOM with jQuery? – ThiefMaster Commented Jan 12, 2013 at 22:14
• Why use css if you can do the same with show()/hide() – Vyacheslav Voronchuk Commented Jan 12, 2013 at 22:15
• 1 Show how the event is added to the X – epascarello Commented Jan 12, 2013 at 22:17
• "but it doesn't work", great! – gdoron Commented Jan 12, 2013 at 22:23
• 1 The close works fine for me. jsfiddle/ZMwH6 – John Koerner Commented Jan 12, 2013 at 22:31

3 Answers 3

John Koerner's code:

$("#closeButton").click(function () {
    $("#sheet").css("display", "none");
});

Your event handler wasn't being attached properly.

You can do like this also, by using class name

( function($) {
  $(".btn-remove").click(function() {  
    $(this).css("display", "none");      
  });
} ) ( jQuery );

We're all a little baffled that you read how to call the jQuery .css function but not .show(), hide(), or attr(). For what it's worth, here's the link to the hide function page. JQuery is the answer. I can't think of a reason not to use it everywhere.

I think what you're trying to do is:

$(document).ready( function() {
  $("img").on("click", function(num) {
     var src = "images/main" + num + ".jpg";
     $("#popover-image").attr("src", src);
     $("#sheet").attr("display", "block");
  });
  $("img[alt=Exit]").on("click", function() {
     $("#sheet").attr("display", "none");
  });
});