Ayuda con ventana modal CSS

srlemuuur dijo:

Metele un z-index: 99 y lo tendrás solucionado.

Otra cosa es que lo quieras tambien por encima de "consulta tus puntos" en ese caso, le estas metiendo un "position: relative" al content del formulario y para que cubra tambien el titulo este deberia estar en el contenedor general de todo el form (con el titulo incluido)

Hacer clic para expandir...

ismadobe dijo:

[MENTION=142347]reynoso29[/MENTION] Si le quitas a la clase modalDialog el atributo z-index: -1 se verá como quieres.

Hacer clic para expandir...

reynoso29 dijo:

Pues no, solo lo quiero que aparezca en esa mitad, así esta bien... y le puse al z-index 99 y ahora no me da clic al boton, osea, trata de dar pero como que se colga. Check: https://superplayero.com/puntos/

- - - Actualizado - - -



Entonces si se la quito, no se el porque no me quiere funcionar sin eso... mira https://superplayero.com/puntos/

Hacer clic para expandir...

srlemuuur dijo:

Le estas poniendo un opacity: 0; si lo pones a 1 se ve.

para esconder y mostrar algo yo recomiendo hacer una clase que sea .hide {display: none;} y con jquery o lo que sea añadirla y esconderla.

Hacer clic para expandir...

reynoso29 dijo:

Ok, si, si le pongo el opacity en 1 si se ve, pero hay como algo en el head del form.

Como dices de la clase .hide ? la hago en el css y como la aplico al html de buton.

Hacer clic para expandir...

belial9826 dijo:

[MENTION=142347]reynoso29[/MENTION] prueba lo siguiente:

HTML:

section.modalDialog {
    bottom: auto;
    top: -77%;
    position: absolute;
    z-index: 9999;
}

Si algo le pones un !important y ya para obligarlo...

Hacer clic para expandir...

srlemuuur dijo:

En el css metele esto:

section.modalDialog {
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0,0,0,0.5);
bottom: 0;
top: 0;
left: 0;
right: 0;
position: fixed;
z-index: 1;
}
section.modal {
background-color: white;
box-shadow: 0px 0px 10px #000;
border-radius: 5px;
color: #fff;
padding: 20px;
position: relative;
width: 400px;
}

abajo del todo del CSS pon
.hide {
display: none;
}

Y ahora, te pregunto, ¿como muestras el error?

Hacer clic para expandir...

srlemuuur dijo:

No tiene mucho sentido eso, por qué le metes un top: -77%? y un z-index: 999 cuando con z-index va bien? xDD

Hacer clic para expandir...

reynoso29 dijo:

Puse los codigos como me dijiste y lo que estaba en el head se soluciono. Y el form aparece pero ahora como hago para ocultarlo y cuando le de al buton aparezca. Porque eso es lo que no entiendo...

- - - Actualizado - - -



Probe tu codigo y este funciona pero arriba, necesito que cuando le de al buton aparezca el cuadro pero dentro del form. Probe cambiando el % pero cuando bajo de -20 otra vez vuelve a dañarse.

Hacer clic para expandir...

srlemuuur dijo:

haz esto y cuando le des al botón aparecera, pero aparecera siempre que le des al boton, este o no mal el input.

$('.open').click(function(e){
e.preventDefault();
if($('#openmodal').hasClass('hide')){
$(this).removeClass('hide');
} else {
$(this).addClass('hide');
}
});


aunque yo lo haria todo distinto

Hacer clic para expandir...

srlemuuur dijo:

haz esto y cuando le des al botón aparecera, pero aparecera siempre que le des al boton, este o no mal el input.

$('.open').click(function(e){
e.preventDefault();
if($('#openmodal').hasClass('hide')){
$(this).removeClass('hide');
} else {
$(this).addClass('hide');
}
});


aunque yo lo haria todo distinto

Hacer clic para expandir...