Как сделать Ionic popup закрыть при нажатии на фон

Как я могу закрыть всплывающее окно, когда я нажимаю на backgroud в ionic. Это мой код. Я новичок в ионных и угловых js. Приведенный ниже код позволяет мне открыть всплывающее окно, и когда я нажимаю на кнопки, которые я сделал всплывающее окно. Я хочу сделать это так, когда я нажимаю на фон, он должен быть меня на главную страницу.

 $scope.showPopup = function() {
   $scope.data = {}
 // An elaborate, custom popup
 var myPopup = $ionicPopup.show({

 title: 'Social Media Services',

 scope: $scope,
 buttons: [
 { 
 type :'ion-social-facebook positive button-large',

     onTap: function(e) {
     // $cordovaSpinnerDialog.show("aaa", "aaaa");
        window.open('https://www.facebook.com/BinDawood.Co', '_system', 'location=yes');
     }
   },
   { type :'ion-social-twitter calm',
     onTap: function(e) {
     // $cordovaSpinnerDialog.show("aaa", "aaaa");
        window.open('https://twitter.com/BinDawoodco', '_system', 'location=yes');
     }
   },
   {  type :'ion-social-pinterest assertive',
     onTap: function(e) {
     // $cordovaSpinnerDialog.show("aaa", "aaaa");
         window.open('http://pinterest.com/bindawoodco', '_system', 'location=yes');
     }
   },

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

 };

Как я могу изменить мой код, чтобы это произошло?

6
angularjs ionic jquery popup

2 ответов

Если вы хотите закрыть пользовательский интерфейс на кране фона, то используйте модальный вместо всплывающего окна. Надеюсь, это решит вашу проблему.

http://ionicframework.com/docs/api/service/ $ionicModal/

4

иногда модальный не то, что мы хотим. Модальный займет весь экран на мобильных экранах.

поэтому я сделал сервис, чтобы иметь возможность закрыть всплывающее окно, нажав на фон и сделал его доступным на Github: https://github.com/mvidailhet/ionic-close-popup

чтобы сделать вещи проще для людей, которые хотели бы эту функцию, я сделал его доступным в реестре Бауэр.

установите его с Bower:

$ bower install ionic-close-popup

включить ионный.модуль closePopup в зависимостях вашего приложения:

angular.module('app', ['ionic', 'ionic.closePopup'])

зарегистрируйте вновь созданное всплывающее окно в службе closePopupService:

var alertPopup = $ionicPopup.alert({
  title: 'Alert popup',
  template: 'Tap outside it to close it'
});
IonicClosePopupService.register(alertPopup);

вот Codepen, показывающий живой код:http://codepen.io/mvidailhet/pen/JYwYEE

5