How can I prevent modal close on outside click ?

Q&A
1

Hello everyone,

I'm working on a widget modal container in a form. I want to prevent modal close on outside click. The modal will be closed only on the button click.

I have tried this way for auto-open modal with custom widget :

function PbAutoPopupCtrl($scope, modalService) {

  'use strict';
    var options = {
        backdrop: 'static',
        keyboard: false
    };

  $scope.$watch('properties.watchedVar', function(newVal, oldVal) {
    if (newVal) {
        modalService.open($scope.properties.modalId, options);
    }
  }, true);
}

but it didn't work !

Best regards,

1 Like
2

Hi,

You can have a look at this stackoverflow question

HTH
Romain

1 Like
3

Did anyone have any luck implementing this (somehow setting modal backdrop to ‘static’)?

As well as losing partly filled in data if accidentally clicking outside of a modal, I’m having a related problem where if there are nested modals (a modal opened on top of another modal), and a user clicks outside the second modal, then the remaining modal with a button with “Close modal on success” set to “yes” doesn’t have the desired behaviour (it acts as if it’s set to “no” and remains open after performing its action). Setting backdrop to ‘static’ looks like it would solve both problems, if I knew where to implement it.

Copying the button widget to a custom one and calling modalService.open(modalId, modalOptions) with modalOptions set to something like {backdrop: 'static, keyboard: false} does not work, the modal opens but those options are ignored.

1 Like