Dismiss modal clicking backdrop



I would like to close the modal touching outside the modal but i am not getting how to do it. I have tried to pass the property enableBackdropDismiss: true, but it does not work.

I am presenting the modal smaller than the page as it is shown here:

The code is the following


background-color: rgba(0, 0, 0, 0.5);

.modal-page {
    position: absolute;
    overflow: hidden;
    width: 90%;
    height: 50vh;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border: 0;
    box-shadow: 0 16px 20px rgba(0,0,0,.5);
    background-color: #fafafa;


<ion-content padding class="modal-page">
      <div class="container">
        <div class="gradient">
          <img class="dish-photo" src="{{ dish.photoURL }}" />
        <div class="dish-text">
          <ion-row class="card-description">
            <ion-col text-left col-10>
              {{ dish.description }}
            <ion-col *ngIf="isShowPrice()" class="col-price">
              <ion-badge>{{ dish.price }} €</ion-badge>
          <ion-row class="card-title">
            <ion-col text-left>
              {{ dish.name }}


  onViewDish(dish: Dish) {
    let modal = this.modalCtrl.create(DishPage, { dish: dish, showPrice: false }, {showBackdrop: true, enableBackdropDismiss: true});

Thanks in advance!