Blur event for Modal Dialog

Is there a way we can add a onblur event on the modal dialog.
I do not want my users to explicitly click on a button to close the dialog, instead anywhere outside the window also should do it.

You can use javascript in a script block to add a listener to get notified when the dialog has been toggled open. Then find the associated “__dim” overlay that is under the dialog and listen for click events on that.

For example, something like this:

CAF.model("#{caf:cid('dialogIdHere'}").addToggleListener(function(dlg) {
  if ("show" == dlg.way) {
      //attach a click listener to "__dim" overlay under the dialog
      $( + "__dim").on("click", function() {
             //clicked, so hide the dialog

If you would like the ModalDialog control to be improved and provide this capability out of the box, then you can make a proposal in brainstorm @ for consideration in a future release.

1 Like