martes, 19 de febrero de 2013

Ventanas Personalizables

Hola que ta creo este es mi primera publicacion,bueno este es un metodo de meter informacion en su paguina o blog de una manera facil y sencilla aqui dejo un ejemplo de lo que les platico
pueden descargar el archivo rar de show dialog


AQUI |

Este enlace tambien sirve para que vean el resultado yo por ejemplo lo use para realizar una descarga directa desde este blog,bueno esto estaria conformado asi:
<script src="LA RUTA DE EL ARCHIVO" type="text/javascript"></script>
<link href="RUTA DE LA HOJA DE ESTILO" rel="stylesheet" type="text/css"></link>
estas dos etiquetas deven ir en el <head>

el codigo para abrir el showdialog seria:
  <div id="nombre">
     <a href="javascript:showDialog('Titulo','contenido','success','aqui va el tiempo en que la ventana se cerraria(opcional)');">
   TEXTO
</a>
</div>

ustedes podrian ir modificando las imagenes de fondo y los textos
para meter vinculos a el contenido de la ventana seria asi:
<a href=http://pagina class=>texto</a> sin comillas("") el class es por si al caso quieren derle algun estilo a el enlace.
pueden usar etiquetas html con <> pero sin usar comillas

el:
#dialog,seria la caja donde se  encuentra el contenido.
el:
#dialog-header,seria la barra donde se encuentra el titulo.
el:
#dialog-close,seria la pequeña x para cerrar la ventana.


lo que usariamos seria el success
para eso solo modificaremos
.success{background:#fff url(imagen.png); bottom right no-repeat; border:1px solid #60a174; border-top:none}
el #fff seria el color de fondo
y imagen.png seria la imagen

tambien usariamos
.successheader{background:url(images/he.png) repeat-x; color:#3c7f51; border:1px solid #60a174; border-bottom:none}
la imajen he.png tiene una dimencion de 1px x 24px

Ustedes pueden cambiar las imagenes y los texto pregunten si hay alguna duda
este tuto esta basado en un tutorial de vagabundia.blogspot.com


No hay comentarios:

Publicar un comentario