当前位置:K88软件开发文章中心编程语言APP编程ionic01 → 文章内容

ionic 对话框

减小字体 增大字体 作者:佚名  来源:网上搜集  发布时间:2019-1-12 6:35:23

ionic 对话框$ionicPopupionic 对话框服务允许程序创建、显示弹出窗口。$ionicPopup 提供了3个方法:alert(), prompt(),以及 confirm() 。实例HTML 代码<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.html" type="text/ng-template">     <input ng-model="data.wifi" type="text" placeholder="Password">    </script></body>JavaScript 代码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'); }); };});尝试一下 ?

ionic 对话框