Как сделать 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);
});
};
Как я могу изменить мой код, чтобы это произошло?
2 ответов
Если вы хотите закрыть пользовательский интерфейс на кране фона, то используйте модальный вместо всплывающего окна. Надеюсь, это решит вашу проблему.
http://ionicframework.com/docs/api/service/ $ionicModal/
иногда модальный не то, что мы хотим. Модальный займет весь экран на мобильных экранах.
поэтому я сделал сервис, чтобы иметь возможность закрыть всплывающее окно, нажав на фон и сделал его доступным на 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