Ionic 4 Modal not appearing with transparent background

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

[niravtrivedi21]

Hi @ionic-team, I am facing the same issue in Ionic 5, can you please guide me to resolve this issue?

[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.