ionic tutorial - Ionic Modal - ionic - ionic development - ionic 2 - ionic framework
- The Ionic JavaScript Modal is a larger popup with more functions and when activated enables the content pane to appear on the top of regular content.
- By default, Modal will cover the entire screen but can be optimized as desired.
- When Ionic modal is activated, the content pane will appear on top of the regular content.
- Modal is basically larger popup with more functionalities.
Using Modal
- There are two ways of implementing modal in Ionic. One way is to add separate template and the other is to add it on top of the regular HTML file, inside script tags.
- First thing we need to do is to connect our modal to our controller using angular dependency injection.
- Then we need to create modal. We will pass in scope and add animation to our modal.
- After that we are creating functions for opening, closing, destroying modal and the last two functions are place where we can write code that will be triggered if modal is hidden or removed.
- If you don't want to trigger any functionality when modal is removed or hidden you can delete the last two functions.
ionic tutorial . extension , ionic framework , ionic , ionic framework book , ionic app example , ionic templates , ionic getting started
Controller Code
.controller('MyController', function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl('my-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
//Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
// Execute action on hide modal
$scope.$on('modal.hidden', function() {
// Execute action
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
// Execute action
});
});
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
ionic tutorial . extension , ionic framework , ionic , ionic framework book , ionic app example , ionic templates , ionic getting started
HTML Code
<script id = "my-modal.html" type = "text/ng-template">
<ion-modal-view>
<ion-header-bar>
<h1 class = "title">Modal Title</h1>
</ion-header-bar>
<ion-content>
<button class = "button icon icon-left ion-ios-close-outline"
ng-click = "closeModal()">Close Modal</button>
</ion-content>
</ion-modal-view>
</script>
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
- The way we showed in last example is when script tag is used as a container to our modal inside some existing HTML file.
- The second way is to create new template file inside templates folder.
- We will use the same code as in our last example but we will remove script tags and we also need to change fromTemplateUrl in controller to connect modal with new created template.
Controller Code
.controller('MyController', function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl('templates/modal-template.html', {
scope: $scope,
animation: 'slide-in-up',
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
//Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
// Execute action on hide modal
$scope.$on('modal.hidden', function() {
// Execute action
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
// Execute action
});
});
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
HTML Code
<ion-modal-view>
<ion-header-bar>
<h1 class = "title">Modal Title</h1>
</ion-header-bar>
<ion-content>
<button class = "button icon icon-left ion-ios-close-outline"
ng-click = "closeModal()">Close Modal</button>
</ion-content>
</ion-modal-view>
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
- Third way of using Ionic modal is by inserting HTML inline. We will use fromTemplate instead of fromTemplateUrl.
ionic tutorial . extension , ionic framework , ionic , ionic framework book , ionic app example , ionic templates , ionic getting started
Controller Code
.controller('MyController', function($scope, $ionicModal) {
$scope.modal = $ionicModal.fromTemplate( '<ion-modal-view>' +
' <ion-header-bar>' +
'<h1 class = "title">Modal Title</h1>' +
'</ion-header-bar>' +
'<ion-content>'+
'<button class = "button icon icon-left ion-ios-close-outline"
ng-click = "closeModal()">Close Modal</button>' +
'</ion-content>' +
'</ion-modal-view>', {
scope: $scope,
animation: 'slide-in-up'
})
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
//Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
// Execute action on hide modal
$scope.$on('modal.hidden', function() {
// Execute action
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
// Execute action
});
});
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
- All tree examples will have the same effect. We will create button to trigger $ionicModal.show() to open modal.
ionic tutorial . extension , ionic framework , ionic , ionic framework book , ionic app example , ionic templates , ionic getting started
HTML Code
<button class = "button" ng-click = "openModal()"></button>
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
- When we open modal, it will contain button that will be used for closing it. We created this button in HTML template.
- There are also other options for modal optimization. We already showed how to use scope and animation. The table below shows other options.
| Option | Type | Detail |
|---|---|---|
| focusFirstInput | boolean | It will auto focus first input of the modal. |
| backdropClickToClose | boolean | It will enable closing the modal when backdrop is tapped. Default value is true. |
| hardwareBackButtonClose | boolean | It will enable closing the modal when hardware back button is clicked. Default value is true. |