ionic-team / ionic-team/ionic-framework
Ionic 4 Modal not appearing with transparent background
- Lingua principale
- TypeScript
- Stelle
- 52.7k
- Fork
- 13.3k
- Merge medio
- 1g 15h
- PR unite (30g)
- 51
Descrizione
**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:
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
```
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Start with the linked StackBlitz example and its pages/modal/modal.scss, then compare it with the provided modal.scss, modal.html, and confirm() code. Reproduce the modal in the affected app and identify why its background or overlay differs from the expected transparent appearance; done means the modal renders with the intended transparent background and overlay.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- scss, typescript
- Ambito
- frontend, mobile-dev
- Tipo di issue
- Bug
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Stato di attività
- Ferma
- Chiarezza
- Da chiarire
- Idoneità per principianti
- 35/100