3

I have an ionic app that has a side-menu, a pop-over, and a modal.

  • In a page, there is a grid table.

  • A user can select a row to highlight it.

  • A user can then open the pop-over and either View or Edit the row.

  • Upon selecting view or edit, a modal will open.

  • In the modal, a cancel button in the upper right corner can be clicked to close the modal.

  • After closing the modal, all clicks, touch, swipe, etc. are not being read by the app anymore.

Here are the codes for popover, and modal.

JS

// MODAL
$ionicModal.fromTemplateUrl('templates/modals/view-product.html', {
  scope: $scope,
  animation: 'slide-in-up'
})
.then(function(modal) {
      $scope.viewModal = modal;
  });

  $scope.openModal = function(modal) {
    $scope[modal].show();
  };
  $scope.closeModal = function(modal) {
    $scope[modal].hide();
  };


// POPOVER
  $ionicPopover.fromTemplateUrl('templates/popovers/list.popover.html', {
      scope: $scope,
  }).then(function (popover) {
      $scope.popover = popover;
  });

HTML

<!-- POP OVER -->
<ion-popover-view class="fit">
    <ion-content>
        <div class="list">
            <a class="item" ng-click="viewProduct(this); popover.hide()" ng-bind="lblView"></a>
            <a class="item" ng-click="editProduct(this); popover.hide()" ng-bind="lblEdit"></a>
        </div>
    </ion-content>
</ion-popover-view>

<!-- MODAL -->
<ion-modal-view>
    <ion-header-bar class="bar bar-header bar-positive">
        <h1 class="title">Viewing Product</h1>
        <button class="button button-clear button-primary" ng-click="closeModal('viewModal')">Cancel</button>
    </ion-header-bar>
    <ion-content class="padding">
        <div class="list">
           <!-- list here -->
        </div>
    </ion-content>
</ion-modal-view>
clintgh
  • 2,039
  • 3
  • 28
  • 44

6 Answers6

2

Here I solved it closing the popover and using a timeout before opening the modal, look

    $scope.openModal = function(){
        if(!$scope.modal) return;       

        // Call a function to close the popover
        $scope.closePopover();      

        // Set a timeout to show the modal only in next cycle
        $timeout(function(){
            $scope.modal.show()
        }, 0);
    });
Gabriel Martins
  • 537
  • 4
  • 12
1

It appears that this issue is already a known bug and is already listed in ionic issues tracker:

https://github.com/driftyco/ionic/issues/8582

I guess I'll just wait for it to be answered in the link above.

clintgh
  • 2,039
  • 3
  • 28
  • 44
0

Just prepared a little playground example, maybe you could compare your solution with it to identify what's the problem there.

http://play.ionic.io/app/89ab5ebbb236

Notice that I actively hide the popover when showing the modal - might this be the issue, have you done that in your application?

So at first sight I'm not able to reproduce the issue. If the provided example does not help you it would be interesting to know if you get any errors in the console though.

OClyde
  • 1,036
  • 6
  • 11
  • I added the HTML code of popover and modal in the question, it might help to check again. Thanks – clintgh Nov 09 '16 at 00:17
0

This should be helpful.

$scope.closePopover = function () {
  $scope.popover.hide();
};

$scope.closeModal = function() {
  $scope.closePopover();
  $scope.Modal.hide();
};
Neven.Leung
  • 820
  • 6
  • 12
0

I had similar problem in my ionic 2 application. I solved it by using "this.navCtrl.pop()" to close the modal insted of using "dismiss()" function.

Note: Do not use "this.setRoot()" function right after closing the modal

Bhagwat
  • 11
  • 1
0

The quick fix for this issue is an easy CSS class, no need for any JS workarounds.

In your custom css file

.modal-open{ pointer-events: all ; }
.popover-open { pointer-events: all ; }

This fix does not override a modal's or popover's behavior when backdropClickToClose:false is set either. The surroundiung area is still not clickable.

rolinger
  • 2,787
  • 1
  • 31
  • 53