Sólo se necesita saber un poco de HTML, JAVASCRIPT y CSS. ¡Empezemos!
Lo primero que tenemos que hacer es la estructura del modal (HTML), que sería una pequeña estructura HTML y también el botón con el cual haremos aparecer el modal. ¡Veamos!
Ahora necesitamos que la estructura del modal aparezca "flotando" y al medio, para eso usamos CSS. ¡Veamos!
Ya nuestro modal esta casi listo solamente nos falta 2 cosas una es hacer funcionar nuestro botón "¡Cerrar el modal!" y también hacer funcionar nuestro botón ¡Aparece! para hacer aparecer nuestro modal, y eso lo hacemos usando JAVASCRIPT. ¡Veamos!
Con esto ya tenemos nuestro modal personalizado, solamente es cuestión de que cambies los estilos (cambiando colores, tamaños, tipo de letra, etc...), pero no podemos dejarte sin que antes pruebes el modal.
Bueno ahora pueden ver el código completo acá http://goo.gl/IYt5g0
Lo primero que tenemos que hacer es la estructura del modal (HTML), que sería una pequeña estructura HTML y también el botón con el cual haremos aparecer el modal. ¡Veamos!
Estructura del modal (HTML)
Hola esto es un modal personalizado, acá podrás todo el contenido que quieras
Código CSS
<} </
- El botón ¡Aparece! tiene un atributo llamado "onclick" cuyo valor es "funcion_aparecer", esto indica que cuando damos clic sobre ese botón llamamos a la funcion "funcion_aparecer" para hacer aparecer nuestro modal.
- El botón del modal tiene un atributo llamado "onclick" cuyo valor es "funcion_cerrar", esto indica que cuando damos clic sobre ese botón llamamos a la funcion "funcion_cerrar" para hacer desaparecer nuestro modal.
- La función "funcion_cerrar" lo único que hace es desaparecer el modal, ¡ojo! desaparecer no eliminar.
Código JAVASCRIPT
<script> //Con esto hacemos referencia al modal y lo guardamos var miModal = documentgetElementById'miModal' ; //Acá hacemos aparecer al modal miModalstyledisplay = 'block'; //Con esto hacemos referencia al modal y lo guardamos var miModal = documentgetElementById'miModal' ; //Acá hacemos invisible al modal miModalstyledisplay = 'none'; </script>
Demostración
Hola esto es un modal personalizado, acá podrás
todo el contenido que quieras
Comentarios
Publicar un comentario