닫으려면 넌 모달이 아닌 대화 상자를 클릭하십시오.

Question

이전 연구에서 대화 상자를 닫기 위해 오버레이에서 라이브 클릭 이벤트를 트리거하는 방법을 알아 냈습니다. 그러나이 대화 상자 기능의 개발은 모달로 제한됩니다. 대화 상자를 넌 모달로 설정하면 클릭 이벤트를 트리거하는 오버레이가 없습니다. 오버레이 클릭 이벤트를 사용하지 않고 외부를 클릭하면 대화 상자 (모달이 아닌)를 닫을 수 있도록 설정하려면 어떻게해야합니까?

$("#dialog-search").dialog({ 
    resizable: false, 
    height:dimensionData.height, 
    width: dimensionData.width, 
    modal: false, 
    title: dimensionData.title, 
    position: [x,y], 
    close: function(event, ui){ 
     callBack(event,ui); 
    } 
}); 
$('.ui-widget-overlay').live('click', function() { 
    $('#dialog-search').dialog("close"); 
}); 

Answer 1

마지막으로 내 자신의 질문에 대한 답을 알아 낸 :

은 여기 내 대화 나 오버레이에서 대화 상자를 닫습니다 수 있습니다 후속 라이브 클릭 이벤트입니다. mousedown 이벤트를 문서 자체에 바인딩 한 다음 대화 상자를 제외하면 오버레이에 대한 라이브 함수의 기능을 복제 할 수 있습니다. 코드 밑에는 솔루션을 시연하는 jsFiddle이 포함되어 있습니다. 내가 구현

// Listen for document click to close non-modal dialog 
$(document).mousedown(function(e) { 
    var clicked = $(e.target); // get the element clicked 
    if (clicked.is('#dlg') || clicked.parents().is('#dlg') || clicked.is('.ui-dialog-titlebar')) { 
     return; // click happened within the dialog, do nothing here 
    } else { // click was outside the dialog, so close it 
     $('#dlg').dialog("close"); 
    } 
}); 

http://jsfiddle.net/elwayman02/Z5KA2/