Open AshishSanu opened 5 years ago
My Modal Looks like this I want the overlay to be transparent
Hi there,
Thanks for the issue. I can confirm that this is a bug. It looks like ion-modal
does accept a --background
CSS variable, but if you are using components like ion-header
and ion-content
you would never see it since those default to white backgrounds.
A temporary workaround would be to set the --background
CSS variable for ion-content
to transparent
in addition to setting the --background
CSS variable for ion-modal
.
We will look into a solution for this. Thanks!
hi @liamdebeasi workaround is also not working
I am also facing the same issue...becuse of this our App is delayed to be shhipped for production. @ionic-team , could you please resolve this issue ASAP.
Você consegue resolver colocando no arquivo global.scss .modal-transparency { --background: var(--ion-background-color, rgba(0, 0, 0, 0.2)) !important ; }
@AshishSanu Going off what @gminhaneli and @liamdebeasi is proposing, here is a temporary solution.
ionic g page <PAGE NAME>
app.module.ts
and include it in the list of importsion-modal
. This can be placed in variables.scss
or global.scss
(show below under CSS Class). --background
is a css property and you will need to change it..ts
where the modal will be presentcssClass
is a property of ion-modal.html
file that will present the modal. Have that button call the function that presents the modal.modal-transparency {
--background: transparent;
--height: 80%;
// ion-toolbar {
// --background: transparent;
// color: white;
// }
// ion-content {
// --background: transparent;
// }
}
async confirm(){
const modal = await this.modalCtrl.create({
component: ModalPage,
cssClass: 'modal-transparency'
// componentProps: {value : "test"},
});
await modal.present();
modal.onDidDismiss().then(res => {
console.log(JSON.stringify(res))
this.isModalDismiss = res.data.isDismiss;
console.log(this.isModalDismiss)
this.routeDriver();
});
}
Hope this helps.
@codeherk @gminhaneli thanks for the response, I tried this but it isn't working
I followed the steps I provided and copied your modal.html
..
Only thing I did not copy was your modal.scss
. You did not include the styling for circle
and modal-content
, so I ignored it altogether.
Here is a screenshot with the stylings from modal.scss
applied.
The div that has the overlay
class has a fixed position and it is applied directly over the content, covering the whole screen.
to have a good transparent (ionic 4), I made this 1) - modal.scss { ion-content { --ion-background-color : transparent !important; }' 2) - global.scss { modal-transparency { --background: transparent!important } 3) - and I call modal like this async confirm(){ const modal = await this.modalCtrl.create({ ... cssClass: 'modal-transparency' ... });
I hope it can help u.
@ae-asseke This not work for me on chrome with ionic serve.
Hi @ionic-team, I am facing the same issue in Ionic 5, can you please guide me to resolve this issue?
Ionic version:
[x] 4.x
I'm submitting a ...
[ ] bug report [ ] feature request
Current behavior:
My Modal is appearing with a solid background/Overlay
Expected behavior:
I want my modal to appear with a transparent background/overlay Steps to reproduce:
Related code:
Other information:
Ionic info: