出處： http://www.cnblogs.com/CheeseZH/
$ionicModal是完整的頁面；
$ionicPopup是(Dialog)對話框樣式的，直接用JavaScript設定對話框的一些參數，通常用於通知消息、確認等作用；
$ionicModal（中文翻譯為‘模型’，感覺還是直接稱為用Modal好一點。）
模型是一個內容面板，可以臨時越過用戶的主視圖。通常用於選擇或編輯一個項。注意，你需要把模型的內容放入一個帶有modal類的div內。
舉個例子，啥是Modal？：
登錄或者注冊頁面的用戶協議（圖1），點擊“用戶協議”之后，會彈出用戶協議具體內容（圖2），這個地方就可以使用Modal來實現。圖3中展示了Application運行起來之后，登錄頁面的源代碼（這些都是ionic自己生成的），忽略其他信息，只看我標出來的紅色1和紅色2，當前紅色2的元素是hide，當我們點擊“用戶協議”之后，紅色2就會從“hide”變成“actived”，這時候我們就看到了圖2的內容了。
圖1 登錄界面用戶協議
圖2 用戶協議具體內容（Modal）
圖3 查看網頁源代碼
如何實現Modal？
首先要有自己Modal的html代碼，注意，你需要把模型的內容放入一個帶有modal類的div內。：
<script id="my-modal.html" type="text/ng-template">
<div class="modal">
<ion-header-bar>
<h1 class="title">我的模型標題</h1>
</ion-header-bar>
<ion-content>
Hello!
</ion-content>
</div>
</script>
然后寫自己的js代碼（其實就是AngularJS代碼）
這部分需要注意以下幾點：
（1）不要忘了function的參數$ionicModal，否則會報錯（用瀏覽器的調試工具F12可以看到）
（2）使用fromTemplateUrl將HTML代碼中script（根據id）在HTML頁面生成自己的Modal（也就是說，在打開頁面的時候，是沒有圖3中的紅色2 div的，當調用了fromTemplateUrl之后，才會生成這個div，而且每調用一次就會生成一個紅色2 div哦，所以寫代碼的時候要把邏輯設計好，注意及時remove()。）；
（3）openModal和closeModal函數很容易理解，這個估計是Modal最常用的方法；
（4）可以通過$scope.$on來進行更豐富的操作（當然，不用$scope.$on也可以進行豐富的操作。）；
1 angular.module('testApp', ['ionic'])
2 .controller('MyController', function($scope, $ionicModal) {
3 $ionicModal.fromTemplateUrl('modal.html', {
4 scope: $scope,
5 animation: 'slide-in-up'
6 }).then(function(modal) {
7 $scope.modal = modal;
8 });
9 $scope.openModal = function() {
10 $scope.modal.show();
11 };
12 $scope.closeModal = function() {
13 $scope.modal.hide();
14 };
15 //當我們用完模型時，清除它！
16 $scope.$on('$destroy', function() {
17 $scope.modal.remove();
18 });
19 // 當隱藏模型時執行動作
20 $scope.$on('modal.hide', function() {
21 // 執行動作
22 });
23 // 當移動模型時執行動作
24 $scope.$on('modal.removed', function() {
25 // 執行動作
26 });
27 });
詳細說說創建的方法
可以使用字符串或者一個URL：
fromTemplate(templateString, options)
templateString 是字符串類型，存儲的是模型的內容；
options是一個對象，存儲的是ionicModal#initialize方法的選項；
返回一個Modal控制器實例；
一個options對象具有一下屬性：
{object=}范圍子類的范圍。默認：創建一個$rootScope子類。{string=}動畫帶有顯示或隱藏的動畫。默認：'slide-in-up'{boolean=}第一個輸入框獲取焦點當顯示時，模型的第一個輸入元素是否自動獲取焦點。默認：false。{boolean=}backdropClickToClose` 點擊背景時是否關閉模型。默認：true。
fromTemplateUrl(templateUrl, options)
templateUrl 是字符串類型，指向待加載模版的URL；
options與上邊的一樣；
返回一個promise對象，指向一個Modal控制器實例；
更直觀一點的使用url創建：
1 $ionicModal.fromTemplateUrl('templates/hello.html', {// modal窗口選項
2 scope: $scope,
3 animation: 'silde-in-up'
4 }).then(function (modal) {
5 $scope.modal = modal;
6 })
templates目錄下hello.html內容如下：
1 <ion-modal-view> 2 <ion-header-bar class="bar-energized"> 3 <h1 class="title">標題</h1> 4 </ion-header-bar> 5 <ion-content> 6 Hello~~~~ 7 </ion-content> 8 </ion-modal-view>