Ionic modal taking up the height and width of the mobile device


I am building an ionic app and i added an ionicModal but i expected the modal to just be like an overlay over the current page the way i see it in most tutorials but mainly web apps.

Just some clarification on mobile apps, wlll the modal always be the height and the width of the device? Can i just make it to be like an overlay on the current page?


The modal will only take up the full height and width of the screen on smaller devices. Look at this codepen, open the modal and resize the window and you will see it changes size based on the window size.

You can override the CSS to accomplish this. Here are some ways users have done this:


thanks brandyshea. How can u put a backdrop on d modal sort of as an overlay over d page so tht only wen d user clicks on d modal then it closes


When you create the modal, pass the backdropClickToClose property:

$ionicModal.fromTemplateUrl('templates/modal.html', {
    scope: $scope,
    backdropClickToClose: false
}).then(function(modal) {
    $scope.modal = modal;

Then the user will not be able to close the modal by clicking outside of it.


Hi @brandyshea,

i had adjust size of popup in mobile device, so that it will not take full height and width of device.
But it is not showing backdrop in mobile phone, only showing backdrop in ipad or tablet device.

I want to also show backdrop when model open in mobile devices

here is codepen

open model by click on edit button and resize window.