[javascript] jQuery UI-외부 클릭시 대화 상자 닫기

특정 요소를 클릭하면 표시되는 jQuery UI 대화 상자가 있습니다. 클릭이 트리거 요소 또는 대화 자체가 아닌 다른 곳에서 발생하면 대화 상자를 닫고 싶습니다.

다음은 대화 상자를 여는 코드입니다.

$(document).ready(function() {
    var $field_hint = $('<div></div>')
        .dialog({
            autoOpen: false,
            minHeight: 50,
            resizable: false,
            width: 375
        });

    $('.hint').click(function() {
        var $hint = $(this);
        $field_hint.html($hint.html());
        $field_hint.dialog('option', 'position', [162, $hint.offset().top + 25]);
        $field_hint.dialog('option', 'title', $hint.siblings('label').html());
        $field_hint.dialog('open');
    });
    /*$(document).click(function() {
        $field_hint.dialog('close');
    });*/
});

마지막 부분의 주석 처리를 제거하면 대화 상자가 열리지 않습니다. 대화 상자를 여는 동일한 클릭이 다시 닫히기 때문이라고 가정합니다.

최종 작업 코드
참고 : 이것은 이벤트 외부 에서 jQuery 플러그인을 사용하고 있습니다.

$(document).ready(function() {
    // dialog element to .hint
    var $field_hint = $('<div></div>')
            .dialog({
                autoOpen: false,
                minHeight: 0,
                resizable: false,
                width: 376
            })
            .bind('clickoutside', function(e) {
                $target = $(e.target);
                if (!$target.filter('.hint').length
                        && !$target.filter('.hintclickicon').length) {
                    $field_hint.dialog('close');
                }
            });

    // attach dialog element to .hint elements
    $('.hint').click(function() {
        var $hint = $(this);
        $field_hint.html('<div style="max-height: 300px;">' + $hint.html() + '</div>');
        $field_hint.dialog('option', 'position', [$hint.offset().left - 384, $hint.offset().top + 24 - $(document).scrollTop()]);
        $field_hint.dialog('option', 'title', $hint.siblings('label').html());
        $field_hint.dialog('open');
    });

    // trigger .hint dialog with an anchor tag referencing the form element
    $('.hintclickicon').click(function(e) {
        e.preventDefault();
        $($(this).get(0).hash + ' .hint').trigger('click');
    });
});

답변

아웃 확인 의 jQuery 외부 이벤트가 플러그인

다음을 수행 할 수 있습니다.

$field_hint.bind('clickoutside',function(){
    $field_hint.dialog('close');
});

답변

오랜만에 끌어서 미안하지만 아래를 사용했습니다. 단점이 있습니까? 열기 기능보기 …

$("#popup").dialog(
{
    height: 670,
    width: 680,
    modal: true,
    autoOpen: false,
    close: function(event, ui) { $('#wrap').show(); },
    open: function(event, ui)
    {
        $('.ui-widget-overlay').bind('click', function()
        {
            $("#popup").dialog('close');
        });
    }
});

답변

다른 플러그인을 사용하지 마십시오.

popin 외부를 클릭 할 때 jquery UI 대화 상자를 닫는 3 가지 방법은 다음과 같습니다.

대화 상자가 모달이거나 배경 오버레이가있는 경우 : http://jsfiddle.net/jasonday/6FGqN/

jQuery(document).ready(function() {
    jQuery("#dialog").dialog({
        bgiframe: true,
        autoOpen: false,
        height: 100,
        modal: true,
        open: function(){
            jQuery('.ui-widget-overlay').bind('click',function(){
                jQuery('#dialog').dialog('close');
            })
        }
    });
});

대화 상자가 모달이 아닌 경우 방법 1 : 방법 1 : http://jsfiddle.net/jasonday/xpkFf/

 // Close Pop-in If the user clicks anywhere else on the page
                     jQuery('body')
                      .bind(
                       'click',
                       function(e){
                        if(
                         jQuery('#dialog').dialog('isOpen')
                         && !jQuery(e.target).is('.ui-dialog, a')
                         && !jQuery(e.target).closest('.ui-dialog').length
                        ){
                         jQuery('#dialog').dialog('close');
                        }
                       }
                      );

비 모달 대화 방법 2 : http://jsfiddle.net/jasonday/eccKr/

  $(function() {
            $( "#dialog" ).dialog({
                autoOpen: false,
                minHeight: 100,
                width: 342,
                draggable: true,
                resizable: false,
                modal: false,
                closeText: 'Close',
                  open: function() {
                      closedialog = 1;
                      $(document).bind('click', overlayclickclose);
                  },
                  focus: function() {
                      closedialog = 0;
                  },
                  close: function() {
                      $(document).unbind('click');
                  }



        });

         $('#linkID').click(function() {
            $('#dialog').dialog('open');
            closedialog = 0;
        });

         var closedialog;

          function overlayclickclose() {
              if (closedialog) {
                  $('#dialog').dialog('close');
              }

              //set to one because click on dialog box sets to zero
              closedialog = 1;
          }


  });

답변

이 전역 스크립트를 추가하기 만하면 모든 모달 대화 상자를 닫습니다.

$(document).ready(function()
{
    $(document.body).on("click", ".ui-widget-overlay", function()
    {
        $.each($(".ui-dialog"), function()
        {
            var $dialog;
            $dialog = $(this).children(".ui-dialog-content");
            if($dialog.dialog("option", "modal"))
            {
                $dialog.dialog("close");
            }
        });
    });;
});

답변

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

위의 코드가 작동하는 것을 보여주는 바이올린 .

답변

나는 두 부분을해야했다. 먼저 외부 클릭 핸들러 :

$(document).on('click', function(e){
    if ($(".ui-dialog").length) {
        if (!$(e.target).parents().filter('.ui-dialog').length) {
            $('.ui-dialog-content').dialog('close');
        }
    }
});

이것은 dialog('close')제네릭 ui-dialog-content클래스를 호출 하므로 클릭이 하나에서 시작되지 않은 경우 모든 대화 상자 를 닫습니다 . 오버레이가 .ui-dialog상자의 일부가 아니기 때문에 모달 대화 상자에서도 작동합니다 .

문제는:

대부분의 대화 상자는 대화 상자 외부의 클릭으로 인해 생성됩니다.
이 핸들러는 클릭이 대화 상자를 만들고 문서에 버블 링 된 후에 실행되므로 즉시 닫습니다.

이 문제를 해결하기 위해 해당 클릭 핸들러에 stopPropagation을 추가해야했습니다.

moreLink.on('click', function (e) {
    listBox.dialog();
    e.stopPropagation(); //Don't trigger the outside click handler
});

답변

이 질문은 약간 오래되었지만 사용자가 어딘가를 클릭 할 때 모달이 아닌 대화 상자를 닫으 려는 경우 JQuery UI Multiselect 플러그인 에서 가져온 이것을 사용할 수 있습니다 . 가장 큰 장점은 클릭이 “손실”되지 않는다는 것입니다 (사용자가 링크 나 버튼을 클릭하려는 경우 작업이 완료 됨).

$myselector.dialog({
            title: "Dialog that closes when user clicks outside",
            modal:false,
            close: function(){
                        $(document).off('mousedown.mydialog');
                    },
            open: function(event, ui) {
                    var $dialog = $(this).dialog('widget');
                    $(document).on('mousedown.mydialog', function(e) {
                        // Close when user clicks elsewhere
                        if($dialog.dialog('isOpen') && !$.contains($myselector.dialog('widget')[0], e.target)){
                            $myselector.dialog('close');
                        }
                    });
                }
            });