Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Alex Chow
Alex Chow
4,521 Points

Modal Window - Cursor Issue

I'm using a modal window jquery plugin by ZURB. The idea is to have the window open when a user clicks on a thumbnail to reveal the detailed image The area around the window ".reveal-modal-bg" will be darkened and have a zoom-out cursor so the user can click anywhere in that area or the close button to close the window.

The problem I'm having is when the user clicks the thumbnail, the cursor will immediately change to the zoom-out version even when its on the expanded modal window and not on the reveal-modal-bg. Only when the user moves the cursor will it return to the pointer. I would like the cursor to remain the pointer and only turn to the zoom-out cursor when it hovers over the background to allow the user to close it. Since I'm new to jquery and java, I'm not sure how to create a solution for this.

Here is the jquery plugin:

/*

(function($) {

/--------------------------- Defaults for Reveal ----------------------------/

/--------------------------- Listener for data-reveal-id attributes ----------------------------/

$('a[data-reveal-id]').live('click', function(e) {
    e.preventDefault();
    var modalLocation = $(this).attr('data-reveal-id');
    $('#'+modalLocation).reveal($(this).data());
});

/--------------------------- Extend and Execute ----------------------------/

$.fn.reveal = function(options) {


    var defaults = {  
        animation: 'fadeAndPop', //fade, fadeAndPop, none
        animationspeed: 300, //how fast animtions are
        closeonbackgroundclick: true, //if you click background will modal close?
        dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal
    }; 

    //Extend dem' options
    var options = $.extend({}, defaults, options); 

    return this.each(function() {

/--------------------------- Global Variables ----------------------------/

        var modal = $(this),
            topMeasure  = parseInt(modal.css('top')),
            topOffset = modal.height() + topMeasure,
            locked = false,
            modalBG = $('.reveal-modal-bg');

/--------------------------- Create Modal BG ----------------------------/

        if(modalBG.length == 0) {
            modalBG = $('<div class="reveal-modal-bg" />').insertAfter(modal);
        }           

/--------------------------- Open & Close Animations ----------------------------/ //Entrance Animations

        modal.bind('reveal:open', function () {
          modalBG.unbind('click.modalEvent');
            $('.' + options.dismissmodalclass).unbind('click.modalEvent');
            if(!locked) {
                lockModal();
                if(options.animation == "fadeAndPop") {
                    modal.css({'top': $(document).scrollTop()-topOffset, 'opacity' : 0, 'visibility' : 'visible'});
                    modalBG.fadeIn(options.animationspeed/2);
                    modal.delay(options.animationspeed/2).animate({
                        "top": $(document).scrollTop()+topMeasure + 'px',
                        "opacity" : 1
                    }, options.animationspeed,unlockModal());                   
                }
                if(options.animation == "fade") {
                    modal.css({'opacity' : 0, 'visibility' : 'visible', 'top': $(document).scrollTop()+topMeasure});
                    modalBG.fadeIn(options.animationspeed/2);
                    modal.delay(options.animationspeed/2).animate({
                        "opacity" : 1
                    }, options.animationspeed,unlockModal());                   
                } 
                if(options.animation == "none") {
                    modal.css({'visibility' : 'visible', 'top':$(document).scrollTop()+topMeasure});
                    modalBG.css({"display":"block"});   
                    unlockModal()               
                }
            }
            modal.unbind('reveal:open');
            $('Body').css('overflow','hidden');
        });     

        //Closing Animation

        modal.bind('reveal:close', function () {
          if(!locked) {
                lockModal();
                if(options.animation == "fadeAndPop") {
                    modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
                    modal.animate({
                        "top":  $(document).scrollTop()-topOffset + 'px',
                        "opacity" : 0
                    }, options.animationspeed/2, function() {
                        modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'});
                        unlockModal();
                    });                 
                }   
                if(options.animation == "fade") {
                    modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
                    modal.animate({
                        "opacity" : 0
                    }, options.animationspeed, function() {
                        modal.css({'opacity' : 1, 'visibility' : 'hidden', 'top' : topMeasure});
                        unlockModal();
                    });                 
                }   
                if(options.animation == "none") {
                    modal.css({'visibility' : 'hidden', 'top' : topMeasure});
                    modalBG.css({'display' : 'none'});  
                }       
            }
            modal.unbind('reveal:close');
            $('Body').css('overflow','scroll');
        });     

/--------------------------- Open and add Closing Listeners ----------------------------/ //Open Modal Immediately

    modal.trigger('reveal:open')

        //Close Modal Listeners
        var closeButton = $('.' + options.dismissmodalclass).bind('click.modalEvent', function () {
          modal.trigger('reveal:close')
        });

        if(options.closeonbackgroundclick) {
            modalBG.css({"zoom-out":"pointer"})
            modalBG.bind('click.modalEvent', function () {
              modal.trigger('reveal:close')
            });
        }
        $('body').keyup(function(e) {
            if(e.which===27){ modal.trigger('reveal:close'); } // 27 is the keycode for the Escape key
        });

/--------------------------- Animations Locks ----------------------------/

        function unlockModal() { 
            locked = false;
        }
        function lockModal() {
            locked = true;
        }   

    });//each call
}//orbit plugin call

})(jQuery);

Any help would be greatly appreciated. Thank you.