jQuery를 대화 외부 마감 클릭

Question

내가 외부를 클릭하여 대화 상자를 닫습니다를 사용할 수 있습니다 알고

$('.ui-widget-overlay').click(function() { $("#dialog").dialog("close"); }); 

을하지만이 변경 어떻게 그래서 내가 원하는 즉, 모든 대화 상자를 작동 to say 우리는 페이지가 여러 개인 대화 상자를 닫고 한 줄의 코드를 더 쉽게 가질 수 있을까요?

Answer 1

아마이 과잉이지만,

에만 페이지에 한 번이 코드를 실행해야

$('.ui-widget-overlay').live('click', 
    function() { 
     $(".ui-dialog").dialog("close"); 
    } 
); 

에서, live 방법은 당신이 대화 상자를 열 수있는 시간을 일해야 해보십시오.

편집 : 작동하지 않는 경우 .dialog의 오류 일 수 있습니다. 거의 주어진

$('.ui-widget-overlay').click(function() { $(".dialogs").each(function() 
{$(this).dialog("close");}) }); 

Answer 2

당신이 클래스 각 대화를

을 제공하고 다음을 선택하고 각 실행하고 그것이 작동 열 수없는 경우에도 그것을 편안히 앉 수 있습니다 시도 작업. 단, ui-dialog 클래스의 요소에 대해서는 dialog('close')으로 전화 할 수 없습니다. 이것이 jquery-ui가 원래 요소 주위에 생성 한 내용이고 close는 .dialog을 호출 할 때 사용한 원래 요소에서 호출되어야합니다. 다행히도 jquery는 ui-dialog-content 클래스를 추가합니다. 가이의 솔루션을 수정하는 것을 사용하면 얻을 :

$(document).on('click', '.ui-widget-overlay', function() { 
    $('.ui-dialog-content').each(function() { 
     $(this).dialog('close'); 
    }); 
});​ 

당신은 jsfiddle에 자신을 위해 이상 시도 할 수 있습니다.

편집 :이 코드가 실행될 때 ui-widget-overlay이 아직 존재하지 않을 수 있으므로 .click에서 .live으로 변경되었습니다.

편집 : 감가 상각되므로 .live 대신 .on으로 변경되었습니다.

Answer 3

답변을 :

$('.ui-widget-overlay').live('click', 
    function() { 
     $(".ui-dialog").each(
      function() { 
       $(this).dialog("close"); 
      } 
     ); 
    } 
); 

Answer 4

내 테스트에서 이것은 잘 작동합니다.

$('[data-role=dialog]').dialog("close"); 

대화 상자를 닫습니다.