2

I have a sap.m.Dialog box somewhere in my application. When the user clicks outside of the Dialog, I want it to close. in JQuery this works. But in sapUI5 I cannot get it to work. Any ideas?

Community
  • 1
  • 1
Matti.b
  • 360
  • 3
  • 12
  • I also found a link to [SAP help](https://help.sap.com/saphelp_nw74/helpdata/en/91/f1b3856f4d1014b6dd926db0e91070/content.htm) where this is described. Except, it does not work. – Matti.b Oct 22 '15 at 10:27
  • I'd recommend to avoid closing the Dialog by clicking outside unless it's supported out-of-the-box by UI5. Not only you'd have to deal with internal attributes within DOM manually but also communicate clearly with the user that *that* dialog behaves differently than other dialogs the user has seen before which creates inconsistencies. Instead, use [sap.m.ResponsivePopover](https://openui5.hana.ondemand.com/#/entity/sap.m.ResponsivePopover) if applicable. – Boghyon Hoffmann Feb 26 '18 at 12:03

2 Answers2

3

Hi,

here how I solved it (here is your updated openDialog() function. The rest of the code is as it was):

openDialog: function(){
  this._oDialog.open();
  document.addEventListener("click", 
    function closeDialog(oEvent){
    if(oEvent.target.id === "sap-ui-blocklayer-popup"){
      sap.ui.getCore().byId("__xmlview0--myDialog").close();
      document.removeEventListener("click", closeDialog);
    }
  });
},

Here is JSBIN example: LINK

keshet
  • 1,716
  • 5
  • 27
  • 54
3

The sap.m.Popover control shows this behaviour by default.

https://sapui5.hana.ondemand.com/explored.html#/entity/sap.m.Popover/samples

simonch
  • 151
  • 1
  • 3