Modal:Mensage en ventana emergente con CSS3

el
Las ventanas emergentes sirven para dar un mensage a los usuarios y garantizar que lo lean, ademas ahorra el espacio porque no hay que poner el mensage en el cuerpo del Blog.
Para agregar estas ventanas emergentes para mensages en tu Blog sigue los siguientes pasos.
  • Ve a Plantilla, has click en Edicion de HTML.
  • Luego busca la etiqueta ]]></b:skin> y encima de ella agrega lo siguiente.
/* Container */
.modal {

/* Overlay page content */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 10000;

/* Transition opacity on open */
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;

/* Hide for now */
opacity: 0;
pointer-events: none;
}

/* Show modal */
.modal:target {
opacity: 1;
pointer-events: auto;
/* at time of writing (Feb 2012), pointer-events not supported by Opera or IE */
}

/* Content */
.modal > div {
width: 500px; /* ancho de ventana */
background: #fff; /* fondo de ventana */
position: relative;
margin: 10% auto;

/* Default minimise animation */
-webkit-animation: minimise 500ms linear; /* animacion, opera y g chrome */
-moz-animation: minimise 500ms linear; /* animacion, firefox */

/* Prettify */
padding: 30px; /* espacio entre el borde y el texto */
border-radius: 7px; /* radio de la ventana */
box-shadow: 0 3px 20px rgba(0,0,0,0.9); /* sombra de la ventana */
background: #fff; /* color de fondo en la parte superior */
background: -moz-linear-gradient(#fff, #ccc); /* degradado de blanco a gris Op,Chr */
background: -webkit-linear-gradient(#fff, #ccc); /* degradado blanco a gris firef */
background: -o-linear-gradient(#fff, #ccc); /* degradado blanco a gris IE9 */
text-shadow: 0 1px 0 #fff; /* sombra del texto de ventana */
}

/* Override animation on modal open */
.modal:target > div {
-webkit-animation-name: bounce;
-moz-animation-name: bounce;
}

.modal h2 {
font-size: 36px; /* tamaño de texto del titulo */
padding: 0 0 20px; /* espacio entre el titulo y lo demas */
}

@-webkit-keyframes bounce {
  0% {
   -webkit-transform: scale3d(0.1,0.1,1);
   box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
  55% {
   -webkit-transform: scale3d(1.08,1.08,1);
   box-shadow: 0 10px 20px rgba(0,0,0,0);
  }
  75% {
   -webkit-transform: scale3d(0.95,0.95,1);
   box-shadow: 0 0 20px rgba(0,0,0,0.9);
  }
  100% {
   -webkit-transform: scale3d(1,1,1);
   box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
}

@-webkit-keyframes minimise {
  0% {
   -webkit-transform: scale3d(1,1,1);
  }
  100% {
   -webkit-transform: scale3d(0.1,0.1,1);
  }
}

@-moz-keyframes bounce {
  0% {
   -moz-transform: scale3d(0.1,0.1,1);
   box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
  55% {
   -moz-transform: scale3d(1.08,1.08,1);
   box-shadow: 0 10px 20px rgba(0,0,0,0);
  }
  75% {
   -moz-transform: scale3d(0.95,0.95,1);
   box-shadow: 0 0 20px rgba(0,0,0,0.9);
  }
  100% {
   -moz-transform: scale3d(1,1,1);
   box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
}

@-moz-keyframes minimise {
  0% {
   -moz-transform: scale3d(1,1,1);
  }
  100% {
   -moz-transform: scale3d(0.1,0.1,1);
  }
}

/* Modal close link */
.modal a[href="#close"] {
position: absolute;
right: 0;
top: 0;
color: transparent;
}

/* Reset native styles */
.modal a[href="#close"]:focus {
outline: none;
}

/* Create close button */
.modal a[href="#close"]:after {
content: 'X';
display: block;

/* Position */
position: absolute;
right: -10px;
top: -10px;
width: 1.5em;
padding: 1px 1px 1px 2px;

/* Style */
text-decoration: none;
text-shadow: none;
text-align: center;
font-weight: bold;
background: #000;
color: #fff;
border: 3px solid #fff;
border-radius: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.modal a[href="#close"]:focus:after,
.modal a[href="#close"]:hover:after {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
}

.modal a[href="#close"]:focus:after {
outline: 1px solid #000;
}
  • La parte de color de fondo superior y luego degradado son los colores que puedes editar para el fondo de la ventana. #fff, #ccc Donde #fff es el color inicial y #ccc es color que se ira degradando.
  • Luego busca la etiqueta </head>, y encima de ella agrega lo siguiente.
<script type='text/javascript' src='http://dl.dropbox.com/u/53097108/ihojosestudios/example/jquery-1.7.2.min.js'/>
  • y guardas los cambios.
  • ahora cuando hagas una entrada o en un gadget puedes agregar lo siguiente (en edicion de html en la entrada).
<a href="#nombre-del-mensage">Nombre del enlace</a>
<aside id="nombre-del-mensage" class="modal">
<div>
<h2>Titulo de la ventana</h2>
<p>Contenido de la ventana, mensage que llevara la ventana</p>
<a href="#close" title="Cerrar"></a>
</div>
</aside>
  • donde dice #nombre-del-mensage puedes poner el nombre que quieras, anteposiendole # y luego poniendo el nombre que quieras sin dejar espacio. ejemplo: #tutorial-de-FUTUdownloads o #lo_que_me_gusta .
  • Luego donde dice nombre-del-mensage pondras el mismo nombre del enlace solo que sin poner #,ejemplo: enlace: #FUTUdownloads - id: FUTUdownloads. mira que si agregas mayusculas en el enlace, el id tambien debe tener las mismas mayusculas.
  • Luego donde dice Titulo de la venatana, es donde pondras el titulo que quieras.
  • Lo que esta en purpura es donde podras el mensage.

Nombre del enlace


Fuente: Paul Rhayes.com