CODEWITHSUNDEEP
angularjsmodal-dialogzurb-foundation
Abhas
Abhas

Reputation: 116

Disable navigation while Angular Foundation Modal is open

How do I disable the navigation along the pages in background when the angular foundation modal is open on top of it. Right now when the modal is opened, I can go backward and forward through the pages while the modal is still open.

Upvotes: 0

Views: 306

Answers (1)

Matias Fernandez Martinez
Matias Fernandez Martinez

Reputation: 1885

I had the same problem and resolve it this way:

The Focus problem:

When modal opens: In the options that you can set on $modal(), you can add an option open that is a function. In that function you can set the focus over some element of the modal or the modal itself:

$modal.open({
  //...
  opened : function() {
    $timeout(function() {
      $('#firstModalButton').focus();
    }, 300);
  }
});

I had to add the timeout, because the opened callback according to foundation page:

promise that is resolved when a modal gets opened after downloading content's template and resolving all variables

But I couldn't add a focus without the timeout, the promise is resolved before the HTML were appended to the DOM.

The Navigation problem:

You should check when your application state changes:

$rootScope.$on('$stateChangeSuccess', function() {
  var modal = $modalStack.getTop();
  modal.key.dismiss();
});

Upvotes: 1

Related Questions