Question

I’m new to jQuery and I did my best to throw together a function that on click opens a dialog message, and on click again closes it. What I want is to be able to click outside the dialog (anywhere on the screen) to close that dialog. How can I accomplish this in the setup I wrote? Also, is the code I currently have done correctly, or could I do it another, easier way?

EDIT (10/17/12):

I’ve updated the jQuery below to include part of Ryan Wheale’s code, and this is the current status:

-“clickoutside” works for the currently open span

-Trying to open another span closes the current span and subsequently the new span

jQuery: http://www.eclipsisna.com/?ena=services

        $(".service_outline a, .service_title a, .service_price a").click(function() {
            $(this).closest("a").children("span").fadeToggle("fast", function() {
                $("span").not(this).fadeOut("fast");
            });
            $(this).one("clickoutside", function () {
                $("span").fadeOut("fast");
            });
        });

HTML:

    <td class="service_outline">
            <h11><a>Opti-<br><h12>Coat</h12><span><font color="#ffcc00">&bull;</font> Application of permanent, nano ceramic clear resin coating (replaces "Wax"/"Sealant")<br><font color="#ffcc00">&bull;</font> Extended durability for 2+ years<br><font color="#ffcc00">&bull;</font> $250<p><center><img src="images/opti-coat.png"></center></span></a></h11>
    </td>

Answer 1

If you are using Ben Allman’s clickoutside plugin found here, your life is easy:

http://jsfiddle.net/ryanwheale/c89Vr/

var $links = $(".service_outline a, .service_title a, .service_price a"),
    $dialogs = $links.find( 'span' );

$links.on( 'click', showDialog );

/* -- EDIT: old code kept for historical purposes
$dialogs.on( 'clickoutside', hideDialogs );
*/

function showDialog (ev) {
    var $thisDialog = $(this).find( 'span' );

    /* -- EDIT: old code kept here for historical purposes
    $dialogs.not( $thisDialog ).fadeOut();
    */

    if(!$thisDialog.is(':visible')) {
        $thisDialog.fadeIn();

        /* -- EDIT: New code */
        setTimeout( function() {
            // IMPORTANT: touch events only supported when you use the 
            // modified plugin at the bottom of this example
            $thisDialog.one('clickoutside.closeDialog, touchstartoutside.closeDialog', function() {
                $thisDialog.unbind('.closeDialog').fadeOut();
            });
        }, 0);
    }
}

/* -- EDIT: old code kept here for historical purposes
function hideDialogs() {
    $dialogs.fadeOut();
}
*/

/*
 * jQuery outside events - v1.1 - 3/16/2010
 * http://benalman.com/projects/jquery-outside-events-plugin/
 * 
 * Copyright (c) 2010 "Cowboy" Ben Alman
 * Dual licensed under the MIT and GPL licenses.
 * http://benalman.com/about/license/

 * IMPORTANT: Modified to support touch events
 */
(function($,c,b){$.map("click dblclick mousemove mousedown mouseup mouseover mouseout change select submit keydown keypress keyup touchstart touchmove touchend".split(" "),function(d){a(d)});a("focusin","focus"+b);a("focusout","blur"+b);$.addOutsideEvent=a;function a(g,e){e=e||g+b;var d=$(),h=g+"."+e+"-special-event";$.event.special[e]={setup:function(){d=d.add(this);if(d.length===1){$(c).bind(h,f)}},teardown:function(){d=d.not(this);if(d.length===0){$(c).unbind(h)}},add:function(i){var j=i.handler;i.handler=function(l,k){l.target=k;j.apply(this,arguments)}}};function f(i){$(d).each(function(){var j=$(this);if(this!==i.target&&!j.has(i.target).length){j.triggerHandler(e,[i.target])}})}}})(jQuery,document,"outside");