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>