opinion sobre este pop-up creado con jquery y css

cristo995 · #1 (**permalink**) 17/05/2014, 22:20

hola a todo.
resulta que estaba necesitando un simple pop -up o modal para mostrar un formulario.. entonces vi un poco de plugins lig box , en bootstrap tambien vi una modal por cierto muy bonita , y tambien otros plugins etc..

pero para lo que yo necesito creo que el incorporar algun plugin de estos mm es como mucho, osea hay muchas cosas que no necesito y sobraria un resto de codigo.

entonces me di la tarea de darmelas de valenton y crear mi propia modal aun asi teniendo poco conocimiento con jquery. al final ps resulto bien cuando doy click en un boton se carga un div el cual ocupa 100% x 100% ancho y alto con un fondo negrito transparentusco y dentro de el tambien cargo un formulario en la mitad de la pantalla mediante margin lef y margin top .. todo esto inicial mente esta oculto con con la propiedad de css visibility: hidden; y con jquery le agredo una clase la cual contiene visibility: visible;

pero me gustaria saber si lo que hice o lo que aplique es correcto o no . nada mejor ver que opinan personas con mayor conocimiento ..

recordad que esto es solo un ejemplo , ya despues le doy estilos y lo pongo mas bonito.

aqui mi codigo completo :
________________________________
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.content{
visibility: hidden;
/*position: absolute;*/
width:100%;
height: 100%;
/*border:1px dotted red;*/
background: #1D1F21;
/*position: absolute;*/
opacity: 0.6;
/*z-index: 1;*/
}
.modal{
width: 600px;
height: 400px;
border:1px dotted gray;
border-radius: 10px 10px 10px 10px;
padding: 50px;
box-sizing:border-box;
background: white;
color:black;
position: absolute;
/*z-index: 2;*/
margin: 100px auto;
visibility: hidden;
}
.mostrar{
position: fixed;
visibility: visible;
margin-top: -10px;
margin-left:-10px;
overflow: hidden;
}

.mostrar-modal{
visibility: visible;
margin-left:50px;
margin-left: 30%;
}

</style>
</head>
<body>
<div class="content">
</div>
<button id="boton">Modal</button>
<div class="modal">
<button id="cerrar"> X cerrar</button>
<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, adipisci, quod, dolore quos doloribus veritatis nemo in vitae non dolores harum saepe commodi est voluptate explicabo necessitatibus inventore incidunt molestiae.
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).on("ready",function(){

$("#boton").on('click',function(){
$('.content').addClass('mostrar');
$('.modal').addClass('mostrar-modal');
});

$('#cerrar').on('click',function(){
$('.content').removeClass('mostrar');
$('.modal').removeClass('mostrar-modal');
});

$('.content').on('click',function(){
$(this).removeClass('mostrar');
$('.modal').removeClass('mostrar-modal');
});
});
</script>
</body>
</html>

Alexis88 · #2 (**permalink**) 17/05/2014, 22:52

No está mal, aunque no estás centrando bien el <div> del medio. Asígnale las siguientes propiedades:

Código CSS:

Ver original.modal{
    width: 600px;
    height: 400px;
    border:1px dotted gray;
    border-radius: 10px;
    padding: 50px;
    box-sizing: border-box;
    background: white;
    color: black;
    position: absolute;
    visibility: hidden;
    /* ACÁ VIENE EL CAMBIO */
    margin: -200px 0 0 -300px;
    top: 50%;
    left: 50%;
}

Y a la clase .mostrar-modal, solo le dejas las propiedad visibility. Por otro lado, esto:

Código Javascript:

Ver original$('#cerrar').on('click',function(){
    $('.content').removeClass('mostrar');
    $('.modal').removeClass('mostrar-modal');
});
 
$('.content').on('click',function(){
    $(this).removeClass('mostrar');
    $('.modal').removeClass('mostrar-modal');
});

Puede ir así:

Código Javascript:

Ver original$('#cerrar, .content').on('click',function(){
    $('.content').removeClass('mostrar');
    $('.modal').removeClass('mostrar-modal');
});

Ya que tanto el dar un clic al botón 'Cerrar' como al fondo opaco, realizan la misma acción. Por lo demás, está bien, aunque como estás usando métodos de jQuery, podrías utilizar otros métodos de animación, para darle así un efecto especial al mostrado/ocultado de la ventana modal.

Usando los métodos fadeIn y fadeOut

Usando los métodos slideUp y slideDown (se consigue el mismo efecto con el método slideToggle)

Usando los métodos show y hide

Y hay más métodos que puedes encontrar aquí. Lee la documentación para que aprendas a usarlos.

Saludos

cristo995 · #3 (**permalink**) 18/05/2014, 00:03

opale amigo.. muchas graciass sobre los eventos fadein fadeout etcc si sabia que existian , pero muchas gracias por recordarmelos y tambien por que ahora ya se como aplicarlos.

pero tengo algunas dudas o preguntas respecto a tu codigo, mas que todo con los css.

1. la prpiedad display:none es lo mismo que la de visibility: hidden ?? cuando devo usarlas y cuando no .

2. otra cosa que me confunde es margin: -200px 0 0 -300px; // el orden es Arriba - derecha- abajo- izquierda ?? pero por que esos valores -200px y el -300px

3. entiendo que cuando usas top:50% y left:50% es para centrar el div, pero entonces eso no es lo mismo que margin-top y margin left ? osea por que solo la palabra top y left

si fuese posible de aclararme esas dudas te agradeciria se que ya es tema de css pero que mas da

" el que sabe sabe"

muy util tu ayuda gracias..

Alexis88 · #4 (**permalink**) 18/05/2014, 00:24

Vamos por partes:

1. La diferencia entre las propiedades display y visibility cuando se le asignan los valores none y hidden, respectivamente, radica en que con la primera, no solo no se ve el elemento, sino que no ocupa espacio alguno en el documento, mientras que con la segunda solo deja de ser visible, pero sigue ocupando el espacio que se le haya asignado.

2. y 3. Con la propiedad margin, establezco el ancho del margen del elemento, por lo que al asignar un valor a cualquiera de las cuatro direcciones o a todas (top, right, bottom y left, en ese orden), se establece una separación entre el elemento y el elemento que lo contiene o algún elemento cercano. La disposición de los valores es como la señalas, mientras que los valores en sí (la mitad de la altura y anchura pero en cifras negativas), así como el 50% en las propiedades top y left, obedecen a lo siguiente: Cuando asigno el 50% a las propiedades en mención, la esquina superior izquierda del elemento, que representa el punto 0 del mismo, queda exactamente en el medio de la página, mientras que asignando valores negativos a los márgenes, en lugar de generar un alejamiento del elemento con respecto al contenedor o a otros elementos adyacentes, sucede lo contrario, ocurre un acercamiento, por lo que si desplazo al elemento a la mitad de la altura y anchura y considerando que la esquina superior izquierda ya se encontraba a la mitad, el elemento queda finalmente centrado en el documento. Esto es posible gracias a la posición del mismo, es decir, al valor absolute de la propiedad position, pues al tener dicho valor en esta propiedad, los desplazamientos que asignemos al elemento, se regirán por las coordenadas absolutas de la página.

La combinación de estas propiedades y valores, son las que permiten centrar completamente a un elemento.

Saludos