Como crear un modal personalizado

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!

Estructura del modal (HTML)

<input type="button" value="!Aparece!" onclick="funcion_aparecer()">
<div id="miModal">
    <p>Hola esto es un modal personalizado, acá podrás 
    todo el contenido que quieras</p>
    <input type="button" value="¡Cerrar modal!" onclick="funcion_cerrar()">
</div>

Ahora necesitamos que la estructura del modal aparezca "flotando" y al medio, para eso usamos CSS. ¡Veamos!

Código CSS

<style>
    #miModal{
        background  : #B3E6F0;
        border      : 1px solid black;
        display     : none;     /*Con esto hacemos invisible al modal del inicio*/
        left        : -210px;   /*Con estas 2 propiedades */
        margin-left : 50%;      /*hacemos que el modal se centre*/
        padding     : 10px;
        position    : fixed;    /*Esto mantiene estatico y flotando el modal*/
        top         : 50px;
        width       : 400px;     
    }
</style>

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!

1. 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.
2. 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.
3. La función "funcion_cerrar" lo único que hace es desaparecer el modal, ¡ojo! desaparecer no eliminar.

Código JAVASCRIPT

<script>
    function funcion_aparecer(){
        //Con esto hacemos referencia al modal y lo guardamos
        var miModal = document.getElementById('miModal');
        //Acá hacemos aparecer al modal
        miModal.style.display = 'block';
    }

    function funcion_cerrar(){
        //Con esto hacemos referencia al modal y lo guardamos
        var miModal = document.getElementById('miModal');
        //Acá hacemos invisible al modal
        miModal.style.display = 'none';
    }
</script>

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.

Demostración

Hola esto es un modal personalizado, acá podrás todo el contenido que quieras

Bueno ahora pueden ver el código completo acá http://goo.gl/IYt5g0