Đóng hộp thoại khi nhấp chuột (ở bất kỳ đâu)

Question

Có tùy chọn mặc định để đóng hộp thoại jQuery bằng cách nhấp vào một nơi nào đó trên màn hình thay vì biểu tượng đóng không?

Answer 1

Khi tạo cửa sổ Hộp thoại JQuery, JQuery chèn lớp phủ ui-widget-overlay. Nếu bạn liên kết một hàm nhấp chuột với lớp đó để đóng hộp thoại, nó sẽ cung cấp chức năng bạn đang tìm kiếm.

Mã sẽ được cái gì như thế này (chưa được kiểm tra):

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

Edit: Sau đây đã được thử nghiệm cho Kendo cũng như:

$('.k-overlay').click(function() { 
      var popup = $("#dialogId").data("kendoWindow"); 
      if (popup) 
       popup.close(); 
     }); 

Answer 2

bài này có thể giúp:

http://www.jensbits.com/2010/06/16/jquery-modal-dialog-close-on-overlay-click/

Xem thêm How to close a jQuery UI modal dialog by clicking outside the area covered by the box? để được giải thích về thời điểm và cách áp dụng overlay nhấp hoặc sự kiện trực tiếp tùy thuộc vào cách bạn đang sử dụng hộp thoại trên trang.

Answer 3

Edit: Đây là một plugin Tôi là tác giả mà mở rộng jQuery UI Dialog để bao gồm đóng cửa khi nhấp bên ngoài cộng với các tính năng khác: https://github.com/jasonday/jQuery-UI-Dialog-extended

Dưới đây là 3 phương pháp để đóng hộp thoại jquery UI khi nhấp ngoài popin:

Nếu hộp thoại là phương thức/có lớp phủ nền: 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'); 
      }) 
     } 
    }); 
}); 

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

Non-Modal thoại Cách 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 4

Trong một số trường hợp, câu trả lời của Jason là quá mức cần thiết. Và $('.ui-widget-overlay').click(function(){ $("#dialog").dialog("close"); }); không phải lúc nào cũng hoạt động với nội dung động.

Các giải pháp mà tôi tìm thấy tác phẩm trong mọi trường hợp là:

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

Answer 5

Nếu bạn có một vài hộp thoại mà có thể được mở trên một trang, điều này sẽ cho phép bất kỳ người trong số họ được đóng lại bằng cách nhấp vào nền:

$('body').on('click','.ui-widget-overlay', function() { 
    $('.ui-dialog').filter(function() { 
    return $(this).css("display") === "block"; 
    }).find('.ui-dialog-content').dialog('close'); 
}); 

(Chỉ làm việc cho các hộp thoại modal, vì nó phụ thuộc vào '.ui-widget overlay'. Và nó gần tất cả hộp thoại mở bất kỳ thời điểm nền tảng của một trong số họ được nhấp.)

Answer 6

Nếu bạn muốn làm điều đó cho tất cả các hộp thoại trong toàn bộ trang, hãy thử mã sau ...

$.extend($.ui.dialog.prototype.options, { 
    open: function() { 
     var dialog = this; 
     $('.ui-widget-overlay').bind('click', function() { 
      $(dialog).dialog('close'); 
     }); 
    } 

}); 

Answer 7

Quay lại đầu trang Nó hỗ trợ một hoặc nhiều hộp thoại trên cùng một trang.

biết 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

Laurent

Answer 8

Hãy thử điều này:

$(".ui-widget-overlay").click(function() { 
    $(".ui-icon.ui-icon-closethick").trigger("click"); 
}); 

Answer 9

Nếu mã của bài viết trước đó không hoạt động, cung cấp cho một thử này:

$("a.ui-dialog-titlebar-close")[0].click(); 

Answer 10

Một chút trễ nhưng đây là giải pháp phù hợp với tôi. Hoàn hảo nếu phương thức của bạn nằm trong thẻ lớp phủ. Vì vậy, phương thức sẽ đóng khi bạn nhấp vào bất kỳ đâu bên ngoài nội dung phương thức.

HTML

<div class="modal"> 
    <div class="overlay"> 
    <div class="modal-content"> 
     <p>HELLO WORLD!</p> 
    </div> 
    </div> 
</div> 

JS

$(document).on("click", function(event) { 
    if ($(event.target).has(".modal-content").length) { 
    $(".modal").hide(); 
    } 
}); 

Đây là một working example