Ionic-framework: Ionic 4 Modal not appearing with transparent background

[AshishSanu]

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:

insert short code snippets here
modal.scss  :
 .main_view{
      background: transparent;
    }
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      opacity: .5;
      background-color: #333;

    }

modal.html:
<ion-content padding class="main_view">
  <div class="overlay" (click)="dismiss()"></div>
  <div class="modal_content">
    <div class="circle"></div>
    <div class="modal-content">
        <ion-progress-bar type="indeterminate"></ion-progress-bar>
  <h2>Waiting for Driver confirmation</h2>
    </div>
  </div>

</ion-content>

and .ts to invoke modal in my app:

  async confirm(){

    const modal = await this.modalCtrl.create({
      component: ModalPage,
      // 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();
    });
  }

Other information:

Ionic info:

insert the output from ionic info here

[AshishSanu]

My Modal Looks like this

I want the overlay to be transparent

[liamdebeasi]

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!

[AshishSanu]

hi @liamdebeasi workaround is also not working

[ManjeetKSingh]

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.

[gminhaneli]

Você consegue resolver colocando no arquivo global.scss .modal-transparency { --background: var(--ion-background-color, rgba(0, 0, 0, 0.2)) !important ; }

[codeherk]

@AshishSanu Going off what @gminhaneli and @liamdebeasi is proposing, here is a temporary solution.

To produce solution:

• generate a page for the modal ionic g page <PAGE NAME>
• import the page module into app.module.ts and include it in the list of imports
• Define a css class that will be used on ion-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.
• import the page into the .ts where the modal will be present
• Include the class name you defined in cssClass property (show below under Function). cssClass is a property of ion-modal
• include a button in the .html file that will present the modal. Have that button call the function that presents the modal.

CSS Class

modal-transparency { 
  --background: transparent; 
  --height: 80%;

 // ion-toolbar {
 //   --background: transparent;
 //   color: white;
 // }
 // ion-content {
 //   --background: transparent;
 // }
}

Function

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.

[AshishSanu]

@codeherk @gminhaneli thanks for the response, I tried this but it isn't working

[codeherk]

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.

[ae-asseke]

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.

[testanddeploy]

@ae-asseke This not work for me on chrome with ionic serve.