Modal backdrop always hidden and z-index bug

[ionitron-bot[bot]]

Original issue by @EmmanuelFRANCOIS on 2017-01-28T15:40:08Z

Ionic version: (check one with "x") [ ] 1.x [x ] 2.x

I'm submitting a ... (check one with "x") [x ] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: When presenting a component through modalcontroller, the backdrop is always hidden whatever showBackdrop is set to true or false.

Expected behavior: When showBackdrop is set to true (default value), backdrop should be visible and behind the modal component.

Steps to reproduce: (followed Ionic 2 API documentation ModalController example)

import { ModalController, ViewController } from 'ionic-angular';
import { CmpModal } from '../../components/cmpModal/cmpModal';
...
presentCmpModal() {
let opts: any = {
  showBackdrop: true,
  enableBackdropDismiss: true
}
let cmpModal = this.modalCtrl.create( CmpModal, null, opts );
cmpModal.onDidDismiss(data => { console.log(data); });
cmpModal.present();
}

The problem seems to come from css:

@media not all and (min-height: 600px) and (min-width: 768px)
ion-modal ion-backdrop {
    visibility: hidden;
}

When deactivating "visibility: hidden" line in chrome, backdrop becomes visible. However, the CmpModal component is placed BEHIND backdrop, so it is not reachable for action...

Other information: Cordova CLI: 6.1.1 Ionic Framework Version: 2.0.0 Ionic CLI Version: 2.2.1 Ionic App Lib Version: 2.2.0 Ionic App Scripts Version: 1.0.0 ios-deploy version: Not installed ios-sim version: Not installed OS: Windows 7 Node Version: v6.9.0 Xcode version: Not installed

[pixolopr]

Here is a solution I made for this.

While presenting the Modal add a class to it. Your class should be one of the following: 1: fullpage-modal 2: center-modal 3: bottom-block-modal

let myModal= this.modalCtrl.create(myModalComponent, {
      post: post
    }, {
        enterAnimation: 'modal-slide-in',
        leaveAnimation: 'modal-slide-out',
        cssClass: 'fullpage-modal'
      })
    myModal.present();
  }

Now add this to your scss:

ion-modal ion-backdrop{
  visibility: visible !important;
}

// CENTER MODAL
.center-modal .modal-wrapper{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0) !important;
  height: auto;
  width: 90%;
  contain: content;
  background: transparent;
}
.center-modal .ion-page{
  position: relative;
  background: transparent;
  contain: content;
}

// BOTTOM BLOCK MODAL
.bottom-block-modal .modal-wrapper {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  border-radius: 7px;
  top: auto;
  height: auto;
  contain: content;
  background: white;
}

.bottom-block-modal .ion-page {
  position: relative;
  height: auto;
  contain: content;
  display: block;
}

// FULL PAGE MODAL
.fullpage-modal .modal-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  contain: content;
}

.fullpage-modal .ion-page {
  position: relative;
  height: 100%;
  contain: content;
  display: block;
}

I think you get the gist of it. You can make your own styles using the same technique.