Much@s ya sabreis lo que es un pop-up. El término anglosajón pop-up (en español: ventana emergente) denota un elemento emergente que se utiliza generalmente dentro de terminología Web. Se pueden hacer de diversas maneras y utilizando diferentes tecnicas. Hoy os voy a explicar como poner varios popups que muestran otras webs conectados con enlaces, creados con Javascript y algo de CSS. Para añadir estos pop-ups a nuestro blog o web, lo primero es poner los estilos en el <body> de nuestra plantilla.
<style>
.popupmulti {
background: none repeat scroll 0 0 #333; color: #FFFFFF !important;border:2px solid #EACD81; font-size:20px; padding: 5px 10px; text-decoration: none;-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;-khtml-border-radius: 20px;border-top: 1px solid #C0C0C0;border-left: 1px solid #C0C0C0;-moz-box-shadow: 2px 3px 5px #696969;-webkit-box-shadow:2px 3px 5px #696969;box-shadow:2px 3px 5px #696969; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#696969,direction=120,strength=4)"; /* IE8+ */filter: progid:DXImageTransform.Microsoft.Shadow(color=#696969,direction=120,strength=4); /* IE7 and lower */
}
.popupmulti:hover {
background: none repeat scroll 0 0 #990000;
}
</style>
Ahora añadimos el script antes del </head> de la plantilla. Donde pone URL WEB (en rojo) ponemos la direccion a mostrar en el pop-up. En este caso, podemos añadir tres.
<script language="JavaScript">
function open1() {
var open1 =
window.open('URL WEB','','scrollbars=yes,height=400,width=600,resizable=yes,left = 190,top = 170');
}
function open2() {
var open2 =
window.open('URL WEB','','scrollbars=yes,height=400,width=600,resizable=yes,left = 190,top = 170');
}
function open3() {
var open3 =
window.open('URL WEB','','scrollbars=yes,height=400,width=600,resizable=yes,left = 190,top = 170');
}
// -->
</script>
|
Por ultimo, alli donde queramos mostrar los enlaces, añadimos este codigo HTML. Modificamos lo que esta en rojo para poner el texto que queramos al enlace.
<a class="popupmulti" href="javascript:open1()">TEXTO</a> <a class="popupmulti" href="javascript:open2()">TEXTO</a> <a class="popupmulti" href="javascript:open3()">TEXTO</a>
|
Aqui teneis una demo para que veais como queda:
