cannot close jQuery UI dialog

Question

I am playing around with jQuery UI. I wanted to dynamically display dialog box, when the user clicks the body element. While the dialog displays, I cannot close it. Moreover, if the dialog displays at page load, closing is possible.

$("body").click(function(e){
   $("#dialog").dialog({
        title:"Title here",
        buttons:{
            Update:function(){$(this).dialog("close");},
            Cancel:function(){$(this).dialog("close");}
        }
    });
});

JSBin

Any idea what am I missing?

I think that $(this) refers back to your $("body")

Carsten Løvbo Andersen
– Carsten Løvbo Andersen

2017-03-20 14:04:09 +00:00
Commented Mar 20, 2017 at 14:04 — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Mar 20, 2017 at 14:04

Carsten Løvbo Andersen · Accepted Answer · 2017-03-20 14:08:43Z

1

Hope this might help you.

With this line if ($(e.target).find('#dialog').length !== 0) {}) we ask if the element we have clicked on is NOT our $(dialog)

$("body").click(function(e) {
  if ($(e.target).find('#dialog').length !== 0) {
    $("#dialog").dialog({

      title: "Tistle here",
      buttons: [{
          text: "Update",
          click: function() {
            $("#dialog").dialog("close");
          }
        },
        {
          text: "close",
          click: function() {
            $("#dialog").dialog("close");
          }
        }
      ]
    });
  }
});

body {
  height: 100vh;
  background-color: red;
}

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="dialog"></div>

answered Mar 20, 2017 at 14:08

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sanjihan Over a year ago

Thanks mate! This works, but I am unsure why is it necessary to check if user didn't click #dialog. If you have time, can you elaborate?

Collectives™ on Stack Overflow

cannot close jQuery UI dialog

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related