jQuery點擊外部對話框關閉對話框

Question

我是jQuery的新手，我盡我所能將一個函數放在一起，點擊打開一個對話框消息，然後再次點擊關閉它。我想要的是能夠在對話框外（屏幕上的任何位置）點擊以關閉對話框。我怎麼能在我寫的設置中完成這個？另外，我目前正在做的代碼是否正確，或者我可以以另一種更簡單的方式做到這一點？

EDIT（12年10月17日）：

我已經更新了下面的jQuery包括瑞安Wheale的代碼的一部分，這是當前的狀態：

- 「clickoutside」 工程當前打開的跨度

-Trying打開另一個跨度關閉當前跨度和隨後新跨越

的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

如果您使用本奧爾曼的clickoutside插件found here，你的生活很簡單：

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");