kann jQuery UI Dialogfeld nicht schließen

Question

Ich spiele mit jQuery UI. Ich wollte das Dialogfeld dynamisch anzeigen, wenn der Benutzer auf das Körperelement klickt. Während das Dialogfeld angezeigt wird, kann ich es nicht schließen. Wenn der Dialog beim Laden der Seite angezeigt wird, ist außerdem das Schließen möglich.

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

JSBin

Jede Idee, was bin ich dabei?

Answer 1

Hoffe, das könnte Ihnen helfen.

Mit dieser Linie if ($(e.target).find('#dialog').length !== 0) {}) wir fragen, ob das Element, das wir auf geklickt haben, ist unser NICHT $(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>