Ionic中[彈出式窗口]有兩種（如下圖所示），$ionicModal和$ionicPopup;

$ionicModal是完整的頁面；

$ionicPopup是(Dialog)對話框樣式的，直接用JavaScript設定對話框的一些參數，通常用于通知消息、確認等作用；

?

本文主要介紹IonicModal的使用方法

中文文檔：http://ionicframework.net/docs/api/service/$ionicModal/

英文文檔：http://ionicframework.com/docs/api/service/$ionicModal/

$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>

參考鏈接（這篇文章寫的內容比較多，初學者不容易看懂）：http://hybridap.blogspot.sg/2015/04/hybrid-apps52ionicmodal.html

轉載于:https://www.cnblogs.com/CheeseZH/p/4522264.html

總結

以上是生活随笔為你收集整理的ZH奶酪：Ionic中（弹出式窗口）的$ionicModal使用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。