ionic(cordova)にて$ionicPopupをカスタマイズしてモーダルを作る
今回やりたかったのはこんな感じの画面。
初めはionicModalのサイズを変えてやろうとしていたのだが、モーダルのサイズを中のテキストとかにあわせてリサイズするのを自前で実装するのが手間でした。
で、少し調べたらionicPopupをカスタマイズしたら簡単にできたのでその手順をメモ。
ionic-close-popup をインストール
ポップアップの外をタップしたらポップアップを閉じるのを簡単に実現できるライブラリ。
https://github.com/mvidailhet/ionic-close-popup
インストール
$ bower install ionic-close-popup
index.htmlで読み込む
<script src="lib/ionic-close-popup/ionic-close-popup.js"></script>
ポップアップ画面を用意
ていっても今回はこれだけ
templates/custome_popup.html
Custom Popup!!
ポップアップを呼び出す
コントローラー
・・・ .controller('DashCtrl', function( $scope, $ionicPopup, IonicClosePopupService ) { var popup = null; $scope.showPopup = function() { popup = $ionicPopup.alert({ scope: $scope, cssClass: "custom-popup", // ★ 見た目をカスタマイズするためにCSSのクラスを追加 templateUrl: "templates/custom_popup.html" }); IonicClosePopupService.register(popup); }; }) ・・・
テンプレート
<ion-view view-title="Dashboard"> <ion-content class="padding"> <a ng-click="showPopup()">ポップアップOPEN</a> </ion-content> <style> <!-- ポップアップサイズを指定することも可能 --> .custom-popup .popup { width: 86%; height: 90%; } <!-- デフォルトで用意されているボタンとヘッダー部分を非表示に --> .custom-popup .popup-head, .custom-popup .popup-buttons { display:none; } </style> </ion-view>
これだけでいけた。以上です