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 Outside Events

ให้คุณทำ:

$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'); 
        }); 
    }
});

ลืมใช้ปลั๊กอินอื่น:

ต่อไปนี้เป็น 3 วิธีในการปิดกล่องโต้ตอบ jquery UI เมื่อคลิกนอกป๊อปอิน:

หากกล่องโต้ตอบเป็นโมดอล / มีการซ้อนทับพื้นหลัง: 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');
                        }
                       }
                      );

Non-Modal โต้ตอบวิธีที่ 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กล่อง

ปัญหาคือ:

1. กล่องโต้ตอบส่วนใหญ่สร้างขึ้นเนื่องจากการคลิกภายนอกกล่องโต้ตอบ
2. ตัวจัดการนี้ทำงานหลังจากการคลิกเหล่านั้นได้สร้างกล่องโต้ตอบและปรากฏขึ้นในเอกสารดังนั้นจึงปิดทันที

ในการแก้ไขปัญหานี้ฉันต้องเพิ่ม 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');
                        }            
                    });
                }                    
            });

คุณสามารถทำได้โดยไม่ต้องใช้ปลั๊กอินเพิ่มเติมใด ๆ

var $dialog= $(document.createElement("div")).appendTo(document.body);
    var dialogOverlay;

    $dialog.dialog({
        title: "Your title",
        modal: true,
        resizable: true,
        draggable: false,
        autoOpen: false,
        width: "auto",
        show: "fade",
        hide: "fade",
        open:function(){
            $dialog.dialog('widget').animate({
                width: "+=300", 
                left: "-=150"
            });

//get the last overlay in the dom
            $dialogOverlay = $(".ui-widget-overlay").last();
//remove any event handler bound to it.
            $dialogOverlay.unbind();
            $dialogOverlay.click(function(){
//close the dialog whenever the overlay is clicked.
                $dialog.dialog("close");
            });
        }
    });

ที่นี่ $ โต้ตอบคือกล่องโต้ตอบ สิ่งที่เรากำลังทำโดยทั่วไปคือรับวิดเจ็ตการวางซ้อนสุดท้ายเมื่อใดก็ตามที่กล่องโต้ตอบนี้เปิดขึ้นและเชื่อมโยงตัวจัดการการคลิกเข้ากับภาพซ้อนทับนั้นเพื่อปิดกล่องโต้ตอบ $ เมื่อใดก็ตามที่มีการคลิกภาพซ้อนทับ

ไม่จำเป็นต้องมีปลั๊กอินเหตุการณ์ภายนอก ...

เพียงแค่เพิ่มตัวจัดการเหตุการณ์ไปยัง .ui-widget-overlay div:

jQuery(document).on('click', 'body > .ui-widget-overlay', function(){
     jQuery("#ui-dialog-selector-goes-here").dialog("close");
     return false;
});

เพียงตรวจสอบให้แน่ใจว่าตัวเลือกใดก็ตามที่คุณใช้สำหรับกล่องโต้ตอบ jQuery ui จะถูกเรียกให้ปิดเช่นกัน .. เช่น# ui-dialog-selector-go-here

สิ่งนี้ไม่ได้ใช้ jQuery UI แต่ใช้ jQuery และอาจมีประโยชน์สำหรับผู้ที่ไม่ได้ใช้ jQuery UI ไม่ว่าด้วยเหตุผลใดก็ตาม ทำเช่นนั้น:

function showDialog(){
  $('#dialog').show();
  $('*').on('click',function(e){
    $('#zoomer').hide();
  });
}

$(document).ready(function(){

  showDialog();    

});

ดังนั้นเมื่อฉันแสดงกล่องโต้ตอบฉันจึงเพิ่มตัวจัดการคลิกที่มองหาการคลิกครั้งแรกเท่านั้น

ตอนนี้จะดีกว่าถ้าฉันสามารถทำให้มันเพิกเฉยต่อการคลิกอะไรก็ได้ใน #dialog และเนื้อหาของมัน แต่เมื่อฉันลองเปลี่ยน $ ('*') ด้วย $ (': not ("# dialog, # dialog *") ') แต่ยังตรวจพบ # คลิกกล่องโต้ตอบ

อย่างไรก็ตามฉันใช้สิ่งนี้สำหรับไลท์บ็อกซ์รูปภาพเท่านั้นดังนั้นจึงใช้งานได้ดีสำหรับจุดประสงค์นั้น

ตัวอย่างที่กำหนดใช้กล่องโต้ตอบเดียวกับ id '#dialog' ฉันต้องการโซลูชันที่ปิดกล่องโต้ตอบใด ๆ :

$.extend($.ui.dialog.prototype.options, {
    modal: true,
    open: function(object) {
        jQuery('.ui-widget-overlay').bind('click', function() {              
            var id = jQuery(object.target).attr('id');
            jQuery('#'+id).dialog('close');
        })
    }
});

ขอบคุณเพื่อนร่วมงานของฉัน Youri Arkesteijn สำหรับคำแนะนำในการใช้งานต้นแบบ

นี่เป็นวิธีเดียวที่ใช้ได้ผลสำหรับฉันสำหรับกล่องโต้ตอบ NON-MODAL ของฉัน

$(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");
    }
});

เครดิตทั้งหมดไปที่ Axle
Click นอกกล่องโต้ตอบที่ไม่ใช่โมดอลเพื่อปิด

สำหรับผู้ที่คุณสนใจฉันได้สร้างปลั๊กอินทั่วไปที่ช่วยให้สามารถปิดกล่องโต้ตอบเมื่อคลิกภายนอกไม่ว่าจะเป็นกล่องโต้ตอบโมดอลหรือไม่ใช่โมดอล สนับสนุนหนึ่งหรือหลายกล่องโต้ตอบในหน้าเดียวกัน

ข้อมูลเพิ่มเติมที่นี่: http://www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside

Laurent

ฉันใช้โซลูชันนี้ตามที่โพสต์ไว้ที่นี่:

var g_divOpenDialog = null;
function _openDlg(l_d) {

  // http://stackoverflow.com/questions/2554779/jquery-ui-close-dialog-when-clicked-outside
  jQuery('body').bind(
   'click',
   function(e){
    if(
      g_divOpenDialog!=null 
      && !jQuery(e.target).is('.ui-dialog, a')
      && !jQuery(e.target).closest('.ui-dialog').length
    ){
      _closeDlg();
    }
   }
  );

  setTimeout(function() {
    g_divOpenDialog = l_d;
    g_divOpenDialog.dialog();
  }, 500);
}
function _closeDlg() {
  jQuery('body').unbind('click');
  g_divOpenDialog.dialog('close');
  g_divOpenDialog.dialog('destroy');
  g_divOpenDialog = null;
}

ฉันมีปัญหาเดียวกันขณะสร้างโมดอลแสดงตัวอย่างในหน้าเดียว หลังจาก googling ฉันพบวิธีแก้ปัญหาที่มีประโยชน์มาก ด้วยเหตุการณ์และเป้าหมายมันกำลังตรวจสอบว่าการคลิกเกิดขึ้นที่ใดและขึ้นอยู่กับว่ามันทำให้เกิดการกระทำหรือไม่ทำอะไรเลย

ไซต์ Code Snippet Library

$('#modal-background').mousedown(function(e) {
var clicked = $(e.target);  
if (clicked.is('#modal-content') || clicked.parents().is('#modal-content')) 
    return; 
} else {  
 $('#modal-background').hide();
}
});

มันง่ายจริง ๆ แล้วคุณไม่จำเป็นต้องใช้ปลั๊กอินใด ๆ เพียงแค่ jquery หรือคุณสามารถทำได้ด้วยจาวาสคริปต์ง่ายๆ

$('#dialog').on('click', function(e){
  e.stopPropagation();
});
$(document.body).on('click', function(e){
  master.hide();
});

ฉันไม่คิดว่าการค้นหาข้อความโต้ตอบโดยใช้ $ ('. any-selector') จาก DOM ทั้งหมดนั้นสดใสมาก

ลอง

$('<div />').dialog({
    open: function(event, ui){
        var ins = $(this).dialog('instance');
        var overlay = ins.overlay;
        overlay.off('click').on('click', {$dialog: $(this)}, function(event){
            event.data.$dialog.dialog('close');
        });
    }
});

คุณได้รับการซ้อนทับจากอินสแตนซ์ไดอะล็อกที่เป็นของจริงๆสิ่งต่างๆจะไม่ผิดพลาดด้วยวิธีนี้

ด้วยรหัสต่อไปนี้คุณสามารถจำลองการคลิกที่ปุ่ม 'ปิด' ของกล่องโต้ตอบ(เปลี่ยนสตริง 'MY_DIALOG' สำหรับชื่อกล่องโต้ตอบของคุณเอง)

$("div[aria-labelledby='ui-dialog-title-MY_DIALOG'] div.ui-helper-clearfix a.ui-dialog-titlebar-close")[0].click();

Smart Code: ฉันใช้รหัสต่อไปนี้เพื่อให้ทุกสิ่งยังคงชัดเจนและอ่านได้ ออกด้านข้างจะปิดกล่องโต้ตอบ

$(document).ready(function () {
   $('body').on('click', '.ui-widget-overlay', closeDialogBox);
});

function closeDialogBox() {
    $('#dialog-message').dialog('close');
}

ฉันลงเอยด้วยการใช้รหัสนี้ซึ่งควรใช้กับกล่องโต้ตอบที่เปิดอยู่บนหน้าละเว้นการคลิกคำแนะนำเครื่องมือและทำความสะอาดทรัพยากรของกล่องโต้ตอบที่ถูกปิดด้วย

        $(document).mousedown(function(e) {
            var clicked = $(e.target); // get the element clicked
            if (clicked.is('.ui-dialog-content, .ui-dialog-titlebar, .ui-tooltip') || clicked.parents().is('.ui-dialog-content, .ui-dialog-titlebar, .ui-tooltip')) {
                return; // click happened within the dialog, do nothing here
            } else { // click was outside the dialog, so close it
                $('.ui-dialog-content').dialog("close");
                $('.ui-dialog-content').dialog("destroy");
                $('.ui-dialog-content').detach();

            }
        });