Custom close button in Ionic popup

Question

I create a custom ionic popup for photo upload. My problem that I am not able to close that popup by using a corner close button. Please help me.

Which look like

Here my code

    $scope.uploadPhoto = function () {
    var confirmPopup = $ionicPopup.show({

        title: 'Upload Photo' + '<i class="ion-ios-close-outline popuoclose " ng-click="closePopup()"></i>',

        scope: $scope,
        buttons: [
            {
                text: '<i class="ion-ios-camera-outline thirty-text" ></i>',
                type: 'button-positive',
                onTap: function () {
                    $scope.takePicture();
                }
   },
            {
                text: 'Gallery',
                type: 'button-positive',
                onTap: function () {
                    $scope.galleryPicture();
                }
   },
 ]
});
  $scope.closePopup = function () {
      confirmPopup.close();
  };
};

@Atula Thanks for reply. when i inspect code i found that it remove ` ng-click="closePopup()` from code. i am bit of confuse why it happen. — Neotrixs, May 05 '16 at 10:58
I have searched a lot and found that this might not be possible with ionic. — Atula, May 05 '16 at 13:03

score 4 · Answer 1 · answered Jul 27 '17 at 07:38

Below code works for me:

Code for javascript function:

$scope.showPopUp= function(msg) {
     var confirmPopup = $ionicPopup.confirm({
        title: 'Upload Photo',
        template: '<center>Select Image from?</center>',
        buttons: [{
            text: 'Gallery',
            type: 'button-positive',
            onTap: function (e) {
                console.log('Gallery ' + picNumber);
                $scope.addImage(picNumber, 'G');
            }
        }, {
            text: 'Camera',
            type: 'button-positive',
            onTap: function (e) {
                console.log('Camera ' + picNumber);
                $scope.addImage(picNumber, 'C');
            }
        }, {
            text: '<i class="icon ion-close-circled"></i>',
            type: 'popupStyle',
            onTap: function (e) {

            }
        }
        ]
    })

};

Code for CSS:

.popupStyle{text-align: right;position: absolute;top: 3px;right: 10px;z-index:1000;color: #029dff !important;padding: 0px !important;background-color: transparent !important; }

Call this function where ever you want to show the dialog.

@NicholasKriedberg Thank you sir :-) Also, an issue I observed in iPhone 5s IOS version 8 is that the close button initially isn't visible but the dialog closes as we press the top right corner of the dialog making the close button visible. Also, the button is visible as we hover over it by long pressing the button and then moving the finger away from the dialog without triggering the event. Seems like an issue with the styling. Working on it and will post an update as soon as I fix it. — Sanket Mendon, Aug 30 '17 at 14:26

score 3 · Answer 2 · answered Sep 25 '17 at 16:09

Make it simple... In cancel button

buttons: [{ 
    text: '<i class="icon ion-close-circled"></i>',
    type:'popclose',
    onTap: function(e) {

    }
}],

And In Css Add Class

.popclose {
     text-align: right;
     position: absolute;
     top: 3px;  // Change the value as per requirement;
     right: -4px; // Change the value as per requirement;
     z-index:1000;
     color: #029dff !important;
     padding: 0px !important;
     background-color: transparent !important; 
}

score 0 · Answer 3 · edited May 23 '17 at 12:34

0

It is most likely due to your ng-click="closePopup()" not compiling.

Have a look at this stackoverflow post to get to a work around.

edited May 23 '17 at 12:34

Community

1
1

answered May 05 '16 at 14:35

Aldracor

2,133
1
19
27

score 0 · Answer 4 · answered Aug 18 '16 at 13:41

I had a similar issue and here is how I solved it.

Using the TemplateUrl parameter, I passed in an HTML template that makes up the body of the popup. I included the tag in here, then used top: 0; right: 0; (with minor tweaks) to get the icon in the top right corner of the popup. By passing it in through the TemplateUrl parameter the ng-click compiles correctly.

score 0 · Answer 5 · answered Feb 08 '17 at 11:22

0

Use "template" instead of "title". And adjust the CSS of this property so that it is equal to the title.

answered Feb 08 '17 at 11:22

Pericles Batista

1

Custom close button in Ionic popup

5 Answers5