Unable to close jQuery UI Dialog when clicking outside-CodePudding

I want to set the dialog box to close when clicking outside of it but every approach I've tried doesn't work.

I think that the problems occurs because the element that triggers the dialog doesn't exists when loading the page.

HTML:

<div class = "photoContainer"></div>
<div id = "dialog"><div id="dialogText"></div></div>

For the JS, I perform an ajax call, and if it succeed I create a table grid with images within photoContainer. Each photo belongs to class photo.

The relevant JS:

createGrid(animalsData);
$(".photoContainer").on('click', '.photo', function(){
                createDialog(animalsData[this.id]);
})

createDialog:

$("#dialog").dialog({
    title: `${animal.name}`,
    modal: true,
    open: function(event, ui){ 
    $('.ui-widget-overlay').bind('click', function()
    { 
        $("#dialog").dialog('close'); 
    });}
})

$("#dialog").position({
    my: "center",
    at: "center",
    of: "window"
})

I've also tried:

$("#dialog").dialog({
    title: `${animal.name}`,
    clickOutside: true,
    clickOutsideTrigger: ".photo"
})

$("#dialog").position({
    my: "center",
    at: "center",
    of: "window"
})

I thought that maybe photo isn't the trigger but photoContainer doesn't help too.

CodePudding user response：

Bind the click to the overlay and call close.

$("#dialog").dialog({
  title: 'Hello',
  modal: true,
});

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

<link href="https://code.jquery.com/ui/1.13.1/themes/south-street/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js" integrity="sha256-eTyxS0rkjpLEo16uXTS0uVCS4815lc40K2iVpWDvdSY=" crossorigin="anonymous"></script>


<div id="dialog">
  <img src="http://placekitten.com/200/300" />
</div>

CodePudding user response：

Consider the following.

$(function() {
  function createDialog(title) {
    var dlg = $("#dialog").removeClass("hidden").dialog({
      title: title,
      modal: true,
    });

    $("body").on("click", "div.ui-widget-overlay", function(e) {
      dlg.dialog('close');
    });

    return dlg;
  }

  $("#getAnimal").click(function() {
    createDialog("Big Cat");
  })
});

.hidden {
  display: none;
}

<link href="https://code.jquery.com/ui/1.13.1/themes/south-street/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js" integrity="sha256-eTyxS0rkjpLEo16uXTS0uVCS4815lc40K2iVpWDvdSY=" crossorigin="anonymous"></script>

<button id="getAnimal">Get Animal Details</button>

<div id="dialog" >
  <img src="http://placekitten.com/200/300" />
</div>

This is only a tiny bit different than the answer supplied by @epascarello. It more closely matches the code sample you supplied.You ckeep mentiong .bind() and that is deprecated.

As of jQuery 3.0, .bind() has been deprecated. It was superseded by the .on() method for attaching event handlers to a document since jQuery 1.7, so its use was already discouraged. For earlier versions, the .bind() method is used for attaching an event handler directly to elements. Handlers are attached to the currently selected elements in the jQuery object, so those elements must exist at the point the call to .bind() occurs. For more flexible event binding, see the discussion of event delegation in .on().