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>