ionic-team / ionic-team/ionic-framework
Ionic 4 Modal not appearing with transparent background
- Lenguaje dominante
- TypeScript
- Estrellas
- 52.7k
- Forks
- 13.3k
- Merge medio
- 1 d 15 h
- PR fusionados (30 d)
- 51
Descripción
**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
```
Guía de contribución
Línea de trabajo
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.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- scss, typescript
- Área
- frontend, mobile-dev
- Tipo de issue
- Error
- Dificultad
- 3/5
- Tiempo estimado
- 1-2 días
- Estado de actividad
- Estancado
- Claridad
- Necesita aclaración
- Aptitud para principiantes
- 35/100