Hộp thoại giao diện người dùng jQuery: cách đóng hộp thoại khi nhấp vào bên ngoài?

Question

Trong docs Tôi không thấy thông tin đó.

Có các tùy chọn để đóng hộp thoại trong các trường hợp như vậy:

1) đẩy Esc;

2) nhấp vào nút "OK" hoặc "Đóng" trong hộp thoại.

Nhưng cách đóng hộp thoại nếu nhấp vào bên ngoài?

Cảm ơn!

Answer 1

Dưới đây là 2 giải pháp khác cho các hộp thoại không modal:

Nếu hộp thoại là phi phương thức Phương pháp 1: phương pháp 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'); 
         } 
         } 
        ); 

Hộp thoại không phải phương thức Phương pháp 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; 
      } 


    }); 

Answer 2

tôi tìm thấy giải pháp trên ryanjeffords.com:

<script type="text/javascript"> 

    $(document).ready(function() { 

     $("#dialog").dialog(); 

     $('.ui-widget-overlay').live("click",function(){ 
      $("#dialog").dialog("close"); 
     });  
    }); 
</script> 

Answer 3

Đối mặt với cùng một vấn đề, tôi đã tạo một plugin nhỏ cho phép đóng hộp thoại khi nhấp vào bên ngoài hộp thoại cho dù đó là hộp thoại phương thức hoặc không theo phương thức. Nó hỗ trợ một hoặc nhiều hộp thoại trên cùng một trang.

Xem thêm thông tin trên trang web của tôi ở đây: http://www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside

Plugin cũng là trên github: https://github.com/coheractio/jQuery-UI-Dialog-ClickOutside

Laurent

Answer 4

Đây là giải pháp của tôi.

tôi có, ví dụ

<div id="dialog1">Some content in here</div> 
<div id="dialog2">Different content in here</div> 
<div id="dialog3">And so on...</div> 

Mỗi div được mở như một hộp thoại tùy thuộc vào những gì người dùng tương tác với. Vì vậy, có thể đóng một trong những hoạt động hiện tại, tôi làm điều này.

// This closes the dialog when the user clicks outside of it. 
$("body").on('click', '.ui-widget-overlay', function() { 
    if($("div.ui-dialog").is(":visible")) 
    { 
     var openDialogId = $(".ui-dialog").find(".ui-dialog-content:visible").attr("id"); 
     if ($("#"+openDialogId).dialog("isOpen")) 
     { 
      $("#"+openDialogId).dialog('close'); 
     } 
    }   
}); 

Answer 5

Nếu hộp thoại là phương thức, sau đó dán 3 dòng này của mã trong open chức năng khi bạn tạo tùy chọn hộp thoại của bạn:

open: function(event,ui) { 
    $('.ui-widget-overlay').bind('click', function(event,ui) {   
     $('#myModal').dialog('close'); 
    }); 
}