Multiple modals

ionic-v1
1

Can anyone help with implementing multiple modals on a page?

I found this codepen but it only allows for a maximum of two:

Thanks!

2

follow the scheme and add more?
Or build 1 modal and change the content

Or build a generic function, that creates modals for you?

Like -> pass the template-url as a variable

4

This seems to do it:

$scope.openModal = function(index) {
if(index == 1){
$scope.oModal1.show();
}
else if(index == 2){
$scope.oModal2.show();
}
else
$scope.oModal3.show();
};

$scope.closeModal = function(index) {
  if(index == 1){
   $scope.oModal1.hide();
  }
  else if(index == 2){
   $scope.oModal2.hide();
  }
  else
    $scope.oModal3.hide();
};
5

The need for stacking modals means you may need to rethink your UX.

1 Like
6

Yes you’re correct. I have been. Thanks for the hint.

7

Perhaps, @AshConnell. But there are certainly cases where it’s relevant to show more than one dialog. I have a case where I need to popup a conflict resolve dialog for one-to-many users when the device is connected to the server, and server data is changed so that there is a conflict. I solved it like below.

(The modals are not shown in a specific scope, but can popup anywhere in my app)

if (hasConflicts) {
  for (var playerId in conflicts) {
    var scope = $rootScope.$new(true);
    scope.conflicts = conflicts[playerId];
    scope.playerId = playerId;

    var isolator = {
      renderModal: function(scope) {
        $ionicModal.fromTemplateUrl('views/mark/user-conflict.html', {
          scope: scope,
          animation: 'slide-in-up'
        }).then(function (modal) {
          scope.modal = modal;
          scope.save = function(pid) {
            saveResolution(pid);
            scope.modal.remove();
          };

          scope.modal.show();
        });
      }
    }
    isolator.renderModal(scope);
  }
}

Hope it helps :slight_smile: