HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
ionic dialog service allows programs to create, display pop-up window.
$ IonicPopup provides three methods: alert (), prompt (), and confirm ().
<body class="padding" ng-controller="PopupCtrl"> <button class="button button-dark" ng-click="showPopup()"> 弹窗显示 </button> <button class="button button-primary" ng-click="showConfirm()"> 确认对话框 </button> <button class="button button-positive" ng-click="showAlert()"> 警告框 </button> <script id="popup-template" type="text/ng-template"> <input ng-model="data.wifi" type="text" placeholder="Password"> </script> </body>
angular.module('mySuperApp', ['ionic']) .controller('PopupCtrl',function($scope, $ionicPopup, $timeout) { // Triggered on a button click, or some other target $scope.showPopup = function() { $scope.data = {} // 自定义弹窗 var myPopup = $ionicPopup.show({ template: '<input type="password" ng-model="data.wifi">', title: 'Enter Wi-Fi Password', subTitle: 'Please use normal things', scope: $scope, buttons: [ { text: 'Cancel' }, { text: '<b>Save</b>', type: 'button-positive', onTap: function(e) { if (!$scope.data.wifi) { // 不允许用户关闭,除非输入 wifi 密码 e.preventDefault(); } else { return $scope.data.wifi; } } }, ] }); myPopup.then(function(res) { console.log('Tapped!', res); }); $timeout(function() { myPopup.close(); // 3秒后关闭弹窗 }, 3000); }; // confirm 对话框 $scope.showConfirm = function() { var confirmPopup = $ionicPopup.confirm({ title: 'Consume Ice Cream', template: 'Are you sure you want to eat this ice cream?' }); confirmPopup.then(function(res) { if(res) { console.log('You are sure'); } else { console.log('You are not sure'); } }); }; // alert(警告) 对话框 $scope.showAlert = function() { var alertPopup = $ionicPopup.alert({ title: 'Don\'t eat that!', template: 'It might taste good' }); alertPopup.then(function(res) { console.log('Thank you for not eating my delicious ice cream cone'); }); }; });