Close dialog on click (anywhere)

前端 未结 10 1008
旧时难觅i
旧时难觅i 2020-11-30 23:34

Is there a default option to close a jQuery dialog by clicking somewhere on the screen instead of the close icon?

相关标签:
10条回答
  • 2020-12-01 00:20

    In some cases, Jason's answer is overkill. And $('.ui-widget-overlay').click(function(){ $("#dialog").dialog("close"); }); doesn't always work with dynamic content.

    The solution that I find works in all cases is:

    $('body').on('click','.ui-widget-overlay',function(){ $('#dialog').dialog('close'); });
    
    0 讨论(0)
  • 2020-12-01 00:21

    A bit late but this is a solution that worked for me. Perfect if your modal is inside the overlay tag. So, the modal will close when you click anywhere outside the modal content.

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

    Here is a working example

    0 讨论(0)
  • 2020-12-01 00:22

    If the code of the previous posts doesn't work, give this a try:

    $("a.ui-dialog-titlebar-close")[0].click();
    
    0 讨论(0)
  • 2020-12-01 00:23

    If you'd like to do it for all dialogs throughout the site try the following code...

    $.extend( $.ui.dialog.prototype.options, { 
        open: function() {
            var dialog = this;
            $('.ui-widget-overlay').bind('click', function() {
                $(dialog).dialog('close');
            });
        }   
    
    });
    
    0 讨论(0)
提交回复
热议问题