Ventana Modal de Texto con CSS3, HTML5 y Jquery

el
Las ventanas modales son utiles para poner mensages a los usuarios sin tener que ocupar espacio en la pagina, se habre una ventana que se puede cerrar y es más seguro que lean el mensage.
  • Ve a Plantilla, Has click en Edicion de HTML.
  • Luego busca la etiqueta </head> y encima de ella pega lo siguiente.
<link href='http://fonts.googleapis.com/css?family=Headland+One|Open+Sans:400,300&subset=latin,cyrillic' rel='stylesheet' type='text/css'></link>
<link rel="stylesheet" href="http://dl.dropbox.com/u/53097108/ihojosestudios/example/avgrund/avgrund.css"></link>
<link rel="stylesheet" href="http://dl.dropbox.com/u/53097108/ihojosestudios/example/avgrund/style.css"></link>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/avgrund/jquery.avgrund.js"></script>
  •  Luego guarda los cambios.
  • ahora para agregar un mensage en una venatana modal, cuando crees una entrada en edicion de HTML. pega lo siguiente.
 <a href="#" id="futushow" class="mbutton">Texto del Boton</a>
<script type='text/javascript'>
    $(function() {
        $('#futushow').avgrund({
            height: 200,
            holderClass: 'mcustom',
            showClose: true,
            showCloseText: 'X',
            enableStackAnimation: true,
            onBlurContainer: '.futucontent',
            template: '<p>Aqui escribe el mensage<br/></p>' +
            '<div>' +
            '<a href="#" target="_blank" class="mgithub">Boton negro</a>' +
            '<a href="#" target="_blank" class="mtwitter">Boton Twitter</a>' +
            '<a href="#" target="_blank" class="mdribble">Boton Dribbble</a>' +               
            '</div>'
        });
    });
    </script>
  • Lo que está negreado es lo que puedes modificar.
  • Lo que está en rojo son los textos que se veran.
  • Lo que esta en purpura son los textos que se veran de los botones de la ventana.
  • Los # son los enlaces de los botones de la ventana.
  • Listo eso es todo cuando alguien esté en la entrada y de click en el boton saldrá una ventana con un mesage.
EJEMPLO: Ejemplo


Dificultad: Facil
Licencia: MITLicense
Fuente: voronianski.com