Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Alex Chow
Alex Chow
4,521 Points
Posted by 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.