Close Popup with tap/click on background

ionic-v1
1

Is it possible to configure the popup that it closes with a tap or click outside of the popup?
Thank you!

2

Well that would defeat the purpose of popup wouldn’t it? A popup is designed to have the user interact with it in order to dismiss it.

3

Have to think about that :slight_smile:

4

If you don’t need the interaction you could always use a modal, which lets you click the backdrop and dismiss it.

5

The ability to do this has been a common scenario for pop-ups for years and I think it should be included as an option for popups.

A good example, on an Android phone Google Calendar. When you create an event, click to choose which calendar. You are given a popup style dialog box. If you do not want to select a calendar, you can click the background. You’re not forced to make a selection and a needless button to dismiss is not included in the popup.

Thanks!

1 Like
6

Also modal + backdropClickToClose doesn’t work because when your interface is smartphone sized, there is no backdrop. The modal consumes the whole screen.

7

I agree I would really like this feature.

Sometimes you need users to cancel an action by clicking the backdrop. The pop closes on android if you press back. The backdrop click is really the same thing. Dismissing the pop up without taking an action

1 Like
8

+1. Definitely very useful/necessary functionality. Like @deliriousrhino said, clicking on the backdrop or clicking outside of the popup, especially if there is a backdrop, is the equivalent of pressing escape on a computer or pressing back on Android. It is a form of interaction.
Any ideas on how to implement this as a workaround? i.e. detect a click on the backdrop and close the popup. I really need this to work.

9

I would love to see this functionality added into ionic, as well.
I ran into the same issue recently. This is the workaround we’re currently using.
It feels kinda hacky, but, hey, it works :slight_smile:

$timeout(function() {
      var ele = angular.element(document.querySelector('.popup-showing')).on('click', function(e) {
          // This prevents us from closing the modal if clicking on buttons etc
          if(e.target != this) {
              return;
          }
          popup.close();
      });
  }, 500);
1 Like
10

I implemented a workaround as a service to achieve this:

//TODO This is a workaround. remove when ionic adds support for this
angular.module('myModule').factory('ClosePopupService', function($document, $ionicPopup, $timeout){
  var lastPopup;
  return {
    register: function(popup) {
      $timeout(function(){
        var element = $ionicPopup._popupStack.length>0 ? $ionicPopup._popupStack[0].element : null;
        if(!element || !popup || !popup.close) return;
        element = element && element.children ? angular.element(element.children()[0]) : null;
        lastPopup  = popup;
        var insideClickHandler = function(event){
          event.stopPropagation();
        };
        var outsideHandler = function() {
          popup.close();
        };
        element.on('click', insideClickHandler);
        $document.on('click', outsideHandler);
        popup.then(function(){
          lastPopup = null;
          element.off('click', insideClickHandler);
          $document.off('click', outsideHandler);
        });
      });
    },
    closeActivePopup: function(){
      if(lastPopup) {
        $timeout(lastPopup.close);
        return lastPopup;
      }
    }
  };
})
.controller('MyCtrl',function($ionicPopup, ClosePopupService){
  var popupConfig = {..someconfig..};
  var popup = $ionicPopup.show(popupConfig);
  ClosePopupService.register(popup);
});
5 Likes
11

Well, I’m a bit late on this one, but my client also wanted to be able to close the popup by tapping on the background. So I made a Service and made it available on Github:

To make things easier for people who would want this feature, I made it available in the bower registry.

You can install it just bu running:
$ bower install ionic-close-popup

Include the ionic.closePopup module in your app’s dependencies:
angular.module('app', ['ionic', 'ionic.closePopup'])

Register your newly created popup to the closePopupService service:

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

Here is a Codepen showing a live code: http://codepen.io/mvidailhet/pen/JYwYEE

Hope this helps !

9 Likes
12

This will help friends

1 Like
13

In your Codepen demo, you just forgot to add your .js file to make it work and show it to us
<script src="//rawgit.com/mvidailhet/ionic-close-popup/master/ionic-close-popup.js"></script>

But it work perfect

I use it to show complementary list informations

3 Likes
14

I soo much needed this…thanks :slight_smile:

15

This helped me :slight_smile:

$ionicPopover.fromTemplateUrl('my-popover.html', {
  scope: $scope,
  "backdropClickToClose" :false
}).then(function(popover) {
  $scope.popover = popover;
});
1 Like
16

thanks so much, bro <3