Open ionitron-bot[bot] opened 5 years ago
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.
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)
The problem seems to come from css:
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