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