ionic-team / ionic-team/ionic-framework

Ionic 4 Modal not appearing with transparent background

Abierto
#18,589 11 comentarios 1 reacción 0 asignados Ver en GitHub
package: core type: bug
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

Abrir la 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

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.