當我在實際的對話框外單擊時，如何關閉jQuery對話框？

Question

我從一個按鈕點擊啓動一個jQuery模式窗口，並希望它在關閉對話框之外的某處時關閉。有誰知道如何實現這一目標？

這是怎樣的對話框創建：

var $dial2 = "" 


    function openmenu(width, height, menuID){ if ($dial2 == "") { 
     $dial2 = $('<div></div>') 
         .html('<iframe id="dial2" style="border: 0px; " src=/CustomControls/PageSubMenu.aspx?&menuID="' + menuID + '" width="100%" height="100%"></iframe>') 
         .dialog({ 
          autoOpen: false, 
          modal: false, 
          height: height, 
          width: width, 
          title: 'Menu', 
          draggable: false, 
          resizable: false, 
          position: { 
           my: 'top', 
           at: 'left-207', 
           of: $('#btnMenu') 
          }, 
          dialogClass: "testdia" 
         }); 
     $dial2.dialog('open'); 
    } 
} 

只是爲了讓你知道，我已經嘗試了選項（2×非模態），它們顯示在計算器的職位，他們不工作，這就是爲什麼我發佈這個。我想這是與iframe等，所以這是一個特殊情況。

Answer 1

可以clickoutside關閉事件綁定到你的對話框對象

編輯：這並沒有工作，因爲，你有位置值of:$('#btnMenu')，但目前還沒有這樣的元素。我已經加入的元素，你可以看看這裏的工作小提琴：http://jsfiddle.net/53v5E/

var $dial2 = "" 
var closed = 0; 

function openmenu(width, height, menuID) { 
    if ($dial2 == "") { 
     $dial2 = $('<div></div>') 
      .html('<iframe id="dial2" style="border: 0px; " src="http://jsfiddle.net/echo/jsonp/" width="100%" height="100%"></iframe>') 
      .dialog({ 
      autoOpen: false, 
      modal: false, 
      height: height, 
      width: width, 
      title: 'Menu', 
      draggable: false, 
      position: { 
       my: 'top', 
       at: 'left-207', 
       of: $('#btnMenu') 
      }, 
      resizable: false, 
      open: function (e, ui) { 
       closed = 0; 
       $(document).bind('click', closeDialog); 
      } 
     }); 
     $dial2.dialog('open'); 
    } 
} 

function closeDialog() { 
    if (closed == 0) { 
     $dial2.dialog('close'); 
     closed = 1; 
    } 
} 

openmenu("500", "500", "5") 

Answer 2

您可以使用文檔的單擊事件關閉對話框。 在這裏，我綁定了一個更好理解的代碼。

var $dial2 = "" 

function openmenu(width, height, menuID){ if ($dial2 == "") { 
    $dial2 = $('<div></div>') 
      .html('<iframe id="dial2" style="border: 0px; " src=/CustomControls/PageSubMenu.aspx?&menuID="' + menuID + '" width="100%" height="100%"></iframe>') 
      .dialog({ 
       autoOpen: false, 
       modal: false, 
       height: height, 
       width: width, 
       title: 'Menu', 
       draggable: false, 
       resizable: false, 
       position: { 
        my: 'top', 
        at: 'left-207', 
        of: $('#btnMenu') 
       }, 
       dialogClass: "testdia" 
      }); 
      $dial2.bind('click',function(e){ 
       e.stopPropagation(); 
      }); 
      $dial2.dialog('open'); 

      $(document).bind('click',function(){ 
       $dial2.dialog('close'); 
      }); 
      } 
     }