CODEWITHSUNDEEP
jqueryjquery-ui
sanjihan
sanjihan

Reputation: 6026

cannot close jQuery UI dialog

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?

Upvotes: 0

Views: 98

Answers (1)

Carsten Løvbo Andersen
Carsten Løvbo Andersen

Reputation: 27051

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>

Upvotes: 1

Related Questions