Dismiss modal clicking backdrop

Ionic Framework ionic-v3
1

Hello,

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:

image
image.png386×686 119 KB

The code is the following

dish.scss

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

.modal-page {
    position: absolute;
    overflow: hidden;
    border-radius:25px;
    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;
}

dish.html

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

menu.ts

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

Thanks in advance!

2

Hi! Could you please tell us how did you stort this out? I have the same issue…