ionic tutorial - Modal windows in Ionicframework - ionic framework - ionic 2 - ionic creator - ionic development
Modal windows in Ionicframework
Ionic has it's own extension for displaying a modal window. Modals can be created by inserting the template straight to the view with a <script> tag or by using a separate template file. In this example we are assuming you have a html file named modal-template.html in a folder called templates. You set the template path in the modal initialisation function with fromTemplateUrl.
Creating the modal object in the scope
HTML
<ion-modal-view>
<ion-header-bar>
<h1>Modal title</h1>
</ion-header-bar>
<ion-content>
<p>Modal content</p>
</ion-content>
</ion-modal-view> Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
Controller
$ionicModal.fromTemplateUrl('/templates/modal-template.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
Control the modal
You can then control the modal with the following commands.
Open modal
$scope.modal.show();Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
Close modal
$scope.modal.hide();Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
Remove modal
$scope.modal.remove();Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
Modal events
You can listen to modal events with the following functions.
Modal is hidden
$scope.$on('modal.hidden', function() {
// Do something when modal is hidden
});Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
Modal is removed
$scope.$on('modal.removed', function() {
// Do something when modal is removed
});