CODEWITHSUNDEEP
modal-dialogangular-uiangular-ui-bootstrap
Aditya Sethi
Aditya Sethi

Reputation: 10586

Angular UI Bootstrap Modal - how to prevent user interaction

In my current usecase, I am trying to use angular-ui modal window to show the progress of calculations that we do in a background process which we disable on completion.

All works well. I just want to disable user from clicking any of element in background.

Any idea how can we do this?

Upvotes: 21

Views: 16017

Answers (2)

Edgar Moreno
Edgar Moreno

Reputation: 41

I just want to add an example with code and extend pkozlowski.opensource answer, Check this example:

    var modalInstance = $modal.open({
        templateUrl: '/views/registration/loginModal.html',
        controller: LoginModalInstanceCtrl,
        windowClass: 'login-modal-window',
        resolve : { 
          credentials : function(){ return {email :'', password:''}; }
        },
        backdrop: 'static', /*  this prevent user interaction with the background  */
        keyboard: false
      });

      modalInstance.result.then(function (res) {

      }, function () {
         /*  cancel */
         $state.go('home');
  });

Upvotes: 4

pkozlowski.opensource
pkozlowski.opensource

Reputation: 117370

You can pass the following options, when opening a modal window, to prevent users from closing the window:

  • backdrop: 'static' - top prevent users from closing a modal on backdrop click
  • keyboard: false - so users can't close a window by pressing ESC

Full documentation here: http://angular-ui.github.io/bootstrap/#/modal

Upvotes: 35

Related Questions