See the Pen by Ionic (@ionic) on CodePen.

Сервис Ionic Popup позволяет программным способом создавать и отображатьвсплывающие окна, которые требуют ответа пользователя для продолжения процесса работы.

Система всплывающих окон имеет поддержку более гибких версий встроенных функций  alert(),prompt(),
и  confirm() , к которым уже привыкли пользователи. Но в добавок с их помощью всплывающие окна
будут иметь полностью настраиваемый контент и внешний вид.

Вводу можно присвоить атрибут  autofocus , тогда поле ввода будет автоматически в фокусе, когда
впервые будет отображаться всплывающее окно. Однако в зависимости от определенных сценариев использования use-cases это может привести к проблемам с
системой tap/click, поэтому Ionic предпочитает использовать атрибут  autofocus 
в качестве настраиваемой функции, а не предполагающейся сразу по умолчанию.

Применение

Несколько основных примеров, информацию о всех доступных опциях смотрите ниже.

angular.module('mySuperApp', ['ionic'])
.controller('PopupCtrl',function($scope, $ionicPopup, $timeout) {

// Triggered on a button click, or some other target
$scope.showPopup = function() {
  $scope.data = {};

  // An elaborate, custom popup
  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) {
            //don't allow the user to close unless he enters wifi password
            e.preventDefault();
          } else {
            return $scope.data.wifi;
          }
        }
      }
    ]
  });

  myPopup.then(function(res) {
    console.log('Tapped!', res);
  });

  $timeout(function() {
     myPopup.close(); //close the popup after 3 seconds for some reason
  }, 3000);
 };

 // A confirm dialog
 $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');
     }
   });
 };

 // An alert dialog
 $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');
   });
 };
});

 

 

Методы

show(options)

Отображает сложное всплывающее окно. Это универсальная функция отображения для всех всплывающих окон.

Сложное всплывающее окно имеет массив  кнопок, у каждой кнопки имеется  текстовое поле  и  тип
в дополнение к функции onTap. Функция onTap вызывается, когда нажата соответствующая кнопка всплывающего окна. По умолчанию данная функция закроет окно и обещание будет успешно завершено - будет разрешено его значение возврата. Если вы хотите сделать так, чтобы заданное по умолчанию действие не произошло, и после нажатия на кнопку всплывающее окно оставалось открытым, поставьте вызовevent.preventDefault(), который будет передаваться при наступлении события (касания кнопки). Подробная информация дана ниже.

Параметр

Тип

Описание

options

объект object

Опции для нового всплывающего окна, в форме:

{

  title: '', // String. Заголовок всплывающего окна.

  cssClass: '', // String,

  subTitle: '', // String (optional). Подзаголовок всплывающего окна.

  template: '', // String (optional). Шаблон HTML, который нужно поместить в тело всплывающего окна.

  templateUrl: '', // String (optional). Адрес URL шаблона HTML, который нужно поместить в тело   всплывающего окна.

  scope: null, // Scope (optional). Область видимости, которую нужно связать с контентом всплывающего окна.

  buttons: [{ // Array[Object] (optional). Кнопки, которые нужно поместить в футер всплывающего окна.

    text: 'Cancel',

    type: 'button-default',

    onTap: function(e) {

      // e.preventDefault() прекратит процесс закрытия всплывающего окна при касании кнопки.

      e.preventDefault();

    }

  }, {

    text: 'OK',

    type: 'button-positive',

    onTap: function(e) {

      // Возвращение значения создаст ситуацию, когда обещание должно будет разрешиться с данным значением.

      возвращение scope.data.response;

    }

  }]

}

  • Возвращает:
    object  Обещание, которое разрешено, когда всплывающее окно закрыто. Имеет дополнительную функцию
    close, которая может использоваться для того чтобы программным способом закрыть всплывающее окно.

alert(options)

Отображает простое всплывающее окно с сообщением и одной кнопкой, которую пользователь может
тапнуть, чтобы закрыть окно.

Параметр

Тип

Описание

options

объект object

Опции для отображения оповещения, в форме:

{

  title: '', // String. Заголовок всплывающего окна.

  cssClass: '', // String, Настраиваемое имя класса CSS

  subTitle: '', // String (optional). Подзаголовок всплывающего окна.

  template: '', // String (optional). Шаблон HTML, который нужно поместить в тело всплывающего окна.

  templateUrl: '', // String (optional). URL-адрес шаблона HTML, который нужно поместить в   тело всплывающего окна.

  okText: '', // String (default: 'OK'). Текст кнопки "OK".

  okType: '', // String (default: 'button-positive'). Тип кнопки "OK".

}

  • Возвращает:
    object  Обещание, которое разрешено, когда всплывающее окно закрыто. Имеет дополнительную
    функцию  close, которая может быть вызвана с помощью любого значения, для того чтобы программным способом закрыть всплывающее окно этим самым значением.

confirm(options)

Отображает простое всплывающее окно подтверждения кнопкой Cancel и OK.

Разрешает обещание при установленном параметре "true", если пользователь нажимает кнопку "OK", и "false", если
пользователь нажимает кнопку "Cancel".

Параметр

Тип

Описание

options

объект object

Параметры для отображения подтверждающего всплывающего окна, имеющего форму:

{

  title: '', // String. Заголовок всплывающего окна.

  cssClass: '', // String, Настраиваемое имя CSS класса

  subTitle: '', // String (optional). Подзаголовок всплывающего окна.

  template: '', // String (optional). Шаблон HTML, который нужно поместить в тело всплывающего окна.

  templateUrl: '', // String (optional). Адрес URL шаблона HTML, который нужно поместить в   тело всплывающего окна.

  cancelText: '', // String (default: 'Cancel'). Текст кнопки "Cancel".

  cancelType: '', // String (default: 'button-default'). Тип кнопки "Cancel".

  okText: '', // String (default: 'OK'). Текст кнопки "OK".

  okType: '', // String (default: 'button-positive'). Тип кнопки "OK".

}

  • Возвращает:
    object  Обещание, которое разрешено, когда всплывающее окно закрыто. Имеет дополнительную
    функцию  close, которая может быть вызвана с помощью любого значения, чтобы программным образом закрыть всплывающее окно этим значением.

prompt(options)

Отображает простое всплывающее окно-подсказку, в котором есть такие элементы, как поле ввода, кнопки OK и Cancel.
Разрешает обещание с помощью значения ввода, если пользователь нажимает "OK", и неопределенным значением (udefined), если пользователь нажимает "Cancel".

 $ionicPopup.prompt({
   title: 'Password Check',
   template: 'Enter your secret password',
   inputType: 'password',
   inputPlaceholder: 'Your password'
 }).then(function(res) {
   console.log('Your password is', res);
 });

Параметр

Тип

Описание

options

объект object

Параметры для отображения всплывающего окна-подсказки, имеющего форму:

{

  title: '', // String. Заголовок всплывающего окна.

  cssClass: '', // String,

  subTitle: '', // String (optional). Подзаголовок всплывающего окна.

  template: '', // String (optional). Шаблон HTML, который нужно поместить в тело всплывающего окна.

  templateUrl: '', // String (optional). Адрес URL шаблона HTML, который нужно поместить в тело всплывающего окна.

  inputType: // String (default: 'text'). Тип ввода, который нужно использовать

  defaultText: // String (default: ''). Исходное значение, помещенное в элемент ввода.

  maxLength: // Integer (default: null). Определяет атрибут maxlength для ввода.

  inputPlaceholder: // String (default: ''). Поле для заполнения, которое нужно использовать для ввода.

  cancelText: // String (default: 'Cancel'. Текст кнопки "Cancel".

  cancelType: // String (default: 'button-default'). Тип кнопки "Cancel".

  okText: // String (default: 'OK'). Текст кнопки "OK".

  okType: // String (default: 'button-positive'). Тип кнопки "OK".

}

  • Возвращает:
    object  Обещание, которое разрешено, когда всплывающее окно закрыто. Имеет дополнительную
    функцию close, которая может быть вызвана любым значением для того, чтобы программным способом закрыть всплывающее окно с помощью данного значения.