Ionic Popup close with custom button

ionic-v1
1

So I have this Ionic popup:

var myPopup = $ionicPopup.show({
            template: '<p>What's the state of the order?</p><br/>'
                        + '<button class="button button-full button-positive" ng-click="sendOrder()">Finished</button>'
                        + '<button class="button button-full button-positive" ng-click="sendOrder()">In Progress</button>',
            title: '<b>Send order</b>',
            scope: $scope,
            buttons: [
                {
                    text: 'Cancel'
                }]
        });

(I have done the buttons in the template so I could have 1 button per line)

This works perfectly, but with the ‘custom’ buttons in the template the popup is not closing when clicking on them. Is there a way to close the popup with the sendOrder() function? Or some event that is called when a button is pressed?

Thanks for your suggestions!

2

I tested your code. Make sure to escape the ’ in your html string like this:

template: '<p>What\'s the state of the order?</p><br/>'

That one was an error for me. Besides that, I added a simple function like this:

$scope.sendOrder = function() {
  myPopup.close();
};

This should be enough to close your popup programmatically!

2 Likes
3

Yes sorry about the ', I quickly translated it to English for this example, but in my own language the ’ isn’t there :smile:.

I found out about the close() function, thanks about that. Only problem I have now: after closing the popup I immediately open another Ionic Popup (the alert). That works, but then I don’t have the transparant grey background anymore in any of my popups.

The alert code:

var alertPopup = $ionicPopup.alert({
                title: '<b>' + alertTitle + '</b>',
                template: alertMessage
            });

Any clue why this is happening?

EDIT: I fixed it with a timeout of 1 milisecond before opening the alert…

2 Likes
4

Hi Mike,
You can try this. it’s work for me.

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

Css

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

Thanks,
Pravin

4 Likes