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();
  };
};

Answer 1

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.

Answer 2

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; 
}