Ionic modal, not showing

Question

my ionic modal view will not appear. The screen will somehow turn gray, but it does not show modal.

I wonder what happened.

This is my code: Approximate view:

<ion-header-bar class="bar-energized"> <h1 class="title">Contact Info</h1> </ion-header-bar> <ion-content> <div class="card" ng-controller='DashCtrl' ng-click="openModal()"> <div class="item item-divider"> {{contact.name}} </div> <div class="item item-text-wrap"> {{contact.info}} </div> </div> </ion-content> 

Modal:

 <script id="templates/contact-modal.html" type="text/ng-template"> <div class="modal"> <ion-header-bar> <h1 class="title">Edit Contact</h1> </ion-header-bar> <ion-content> <div class="list"> <label class="item item-input"> <span class="input-label">Name</span> <input type="text" ng-model="contact.name"> </label> <label class="item item-input"> <span class="input-label">Info</span> <input type="text" ng-model="contact.info"> </label> </div> <button class="button button-full button-energized" ng-click="closeModal()">Done</button> </ion-content> </div> </script> 

Controller:

 .controller('DashCtrl', function($scope, $ionicModal) { $scope.contact = { name: 'Mittens Cat', info: 'Tap anywhere on the card to open the modal' } $ionicModal.fromTemplateUrl('templates/contact-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(); }; $scope.$on('$destroy', function() { $scope.modal.remove(); }); }) 

The window will turn gray, but modal.

Thanks for the help!

(Tried in Safari browser on Mac)

Answer 1

Insert your modal text in <ion-modal-view> instead of <div class="modal">

 <ion-modal-view > <ion-header-bar> <h1 class="title">Edit Contact</h1> </ion-header-bar> <ion-content> <div class="list"> <label class="item item-input"> <span class="input-label">Name</span> <input type="text" ng-model="contact.name"> </label> <label class="item item-input"> <span class="input-label">Info</span> <input type="text" ng-model="contact.info"> </label> </div> <button class="button button-full button-energized" ng-click="closeModal()">Done</button> </ion-content> </ion-modal-view> 

Documentation for details.

Answer 2

Small update:

In the current version (mine 1.7.7) you should use wrapping <ion-modal-view > , but you should not use wrapping <script> -tag! Otherwise, you will get only a dark overlay, but not a modal window!

Answer 3

without script tag, its work in ionic version 1.3.0