ionic中的模態(tài)窗口
在ionic中，除了常規(guī)的彈窗【$ionicPopup】還提供了浮動窗口【$ionicPopover】
其次在ionic中狈谊，還有一種新的彈窗，這樣的彈窗，會占據(jù)整個頁面告嘲，成為模態(tài)窗口，模態(tài)窗口可以通過$ionicModal服務(wù)來進行創(chuàng)建奖地、顯示橄唬、隱藏、移除等功能参歹。
模態(tài)窗口仰楚，為了加載方便，通常會在頁面中的script標(biāo)簽中進行添加犬庇，如下
<script type="text/ng-template" id="modal">
<!-- 此處是添加HTML模板內(nèi)容的地方 -->
<div class="modal">
<ion-header-bar>
<h1 class="title">模態(tài)窗口標(biāo)題</h1>
</ion-header-bar>
<ion-content>
<!-- 模態(tài)窗口中顯示的內(nèi)容 -->
</ion-content>
</div>
</script>
在Angular的控制器中僧界，就可以初始化這個模態(tài)窗口，并且定義函數(shù)來進行顯示臭挽、隱藏捎泻、刪除的控制
var app = angular.module("myApp", ["ionic"]);
app.controller("myCtrl", function($scope, $ionicModal) {
// 初始化窗口
$ionicModal.fromTemplateUrl("modal", {
scope:$scope,
animation:"slide-in-up"
}).then(function(modal) {
$scope.dialog = modal;
});
// 顯示模態(tài)窗口的函數(shù)
$scope.openModal = function() {
$scope.dialog.show();
}
// 隱藏模態(tài)窗口的函數(shù)
$scope.hideModal = function() {
$scope.dialog.hide();
}
// 刪除模態(tài)窗口的函數(shù)：慎重使用，一旦刪除埋哟，這個窗口將不可用
$scope.removeModal = function() {
$scope.dialog.remove();
}
});
在HTML頁面中笆豁，就可以直接調(diào)用了
<ion-header-bar>
<button class="button button-clear" ng-click="openModal()">顯示模態(tài)窗口</button>
<h1 class="title">頁頭標(biāo)題</h1>
</ion-header-bar>
以上是關(guān)于ionic中模態(tài)窗口的使用方式郎汪，僅供參考。
