Unable to make modal box appear using JQuery


Using JQuery I'm trying to get a modal box to open after a click is made on an image. I can make the box open using a hard link, but not when the user clicks the image. I've tried using .show but this does'doesn't seem correct?

Example fiddle here http://jsfiddle.net/63VeU/13/

The below code structure using .go etc must remain as thats how the images are identified that they can be clicked on.

I know this is a rookie, question, but I'm unable to find the anser I need anywhere.

        $(document).ready(function() {
            $('.go img').css('cursor', 'pointer');
            $('.go').on('click', 'img', function(e) {
                $( "#modal-show" ).show( "slow", function() {
    // Animation complete.
                return false;
Problem courtesy of: Dano007


Sure. Here you got a working demo. I noticed you do some additional stuff like SaveMyBadge(); so updated the fiddle.

<a href="#modal-show" title="Clicking this link shows the modal">
    <img class="images BadgeImgOutline responsive-image" src="http://kudosoo.com/GBadges/badge9.jpg" alt="badge-image" />

$(document).on('click', '.click-badge', function () {
    //do other stuff if you need to

    return false;
Solution courtesy of: Dejan.S


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.