The pull-up menu (ActionSheet) allows the user to select options through the box that pops up.
Very dangerous options will be recognized in highlighted red. You can make it disappear by clicking the Cancel button or clicking a blank space.
Example
HTML Code
<body ng-app="starter" ng-controller="actionsheetCtl" ><ion-pane><ion-content ><h2 ng-click="show()">Action Sheet</h2></ion-content></ion-pane></body>
JavaScript Code
Triggering the pull-up menu in the code requires the $ionicActionSheet service in your angular controller:
angular.module('starter', ['ionic']).run(function($ionicPlatform) {$ionicPlatform.ready(function() {// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard// for form inputs)if(window.cordova && window.cordova.plugins.Keyboard) {cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);}if(window.StatusBar) {StatusBar.styleDefault();}});}).controller( 'actionsheetCtl',['$scope','$ionicActionSheet','$timeout' ,function($scope,$ionicActionSheet,$timeout){$scope.show = function() {var hideSheet = $ionicActionSheet.show({buttons: [{ text: '<b>Share</b> This' },{ text: 'Move' }],destructiveText: 'Delete',titleText: 'Modify your album',cancelText: 'Cancel',cancel: function() {// add cancel code..},buttonClicked: function(index) {return true;}});$timeout(function() {hideSheet();}, 2000);}; }])The operation effect is as follows:
Complete source code:
<html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"><title></title><link href="http://cdn.bootcss.com/ionic/1.3.1/css/ionic.min.css" rel="stylesheet"><script src="http://cdn.bootcss.com/ionic/1.3.1/js/ionic.bundle.min.js"></script><script type="text/javascript">angular.module('starter', ['ionic']).run(function($ionicPlatform) {$ionicPlatform.ready(function() {// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard// for form inputs)if(window.cordova && window.cordova.plugins.Keyboard) {cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);}if(window.StatusBar) {StatusBar.styleDefault();}});}).controller( 'actionsheetCtl',['$scope','$ionicActionSheet','$timeout' ,function($scope,$ionicActionSheet,$timeout){$scope.show = function() {var hideSheet = $ionicActionSheet.show({buttons: [{ text: '<b>Share</b> This' },{ text: 'Move' }],destructiveText: 'Delete',titleText: 'Modify your album',cancelText: 'Cancel',cancel: function() {// add cancel code..},buttonClicked: function(index) {return true;}});$timeout(function() {hideSheet();}, 2000);}; }])</script></head><body ng-app="starter" ng-controller="actionsheetCtl" ><ion-pane><ion-content ><h2 ng-click="show()">Action Sheet</h2></ion-content></ion-pane></body></html>The above is the relevant knowledge of the ionic pull-up menu (ActionSheet) instance code introduced to you by the editor. I hope it will be helpful to you!