Hacker of the Web
Tus ideas en código!...y mas

Estas en: > > DHTML: Ventanas emergentes sencillas
23ene2010

DHTML: Ventanas emergentes sencillas

Hace poco DiGiTaL me preguntaba que si sabia como crear ventanas emergentes en el blog. Despues de esa pregunta me dispuse a desarrollar un sistema mediante por el cual poder crear ventanas emergentes en unos cuantos pasos, aqui explicaré el resultado.

Rojo

Primero que nada, ¿Qué es DHTML?

Dynamic-HTML, o HTML dinámico en español, es un conjunto de técnicas que permiten crear sitios web en los que el internauta puede interactuar con la página. Básicamente los lenguajes que se utilizan son: HTML,CSS y Javascript. Permitiendo modificar la apariencia de la página web.


Aclarado lo anterior, el primer paso es agregar lo siguiente antes de </head>: 
<!-- Start: DHTML, ventanas emergentes -->
<script type='text/javascript'>//<![CDATA[
var xVersion='3.15.2',xNN4,xOp7,xOp5or6,xIE4Up,xIE4,xIE5,xMac,xUA=navigator.userAgent.toLowerCase();if (window.opera){xOp7=(xUA.indexOf('opera 7')!=-1 || xUA.indexOf('opera/7')!=-1);if (!xOp7) xOp5or6=(xUA.indexOf('opera 5')!=-1 || xUA.indexOf('opera/5')!=-1 || xUA.indexOf('opera 6')!=-1 || xUA.indexOf('opera/6')!=-1);}else if (document.all && xUA.indexOf('msie')!=-1) {xIE4Up=parseInt(navigator.appVersion)>=4;xIE4=xUA.indexOf('msie 4')!=-1;xIE5=xUA.indexOf('msie 5')!=-1;}else if (document.layers) {xNN4=true;}xMac=xUA.indexOf('mac')!=-1;function xGetElementById(e) {if(typeof(e)!='string') return e;if(document.getElementById) e=document.getElementById(e);else if(document.all) e=document.all[e];else e=null;return e;}function xParent(e,bNode){if (!(e=xGetElementById(e))) return null;var p=null;if (!bNode && xDef(e.offsetParent)) p=e.offsetParent;else if (xDef(e.parentNode)) p=e.parentNode;else if (xDef(e.parentElement)) p=e.parentElement;return p;}function xDef() {for(var i=0; i<arguments.length; ++i){if(typeof(arguments[i])=='undefined') return false;}return true;}function xStr(s) {for(var i=0; i<arguments.length; ++i){if(typeof(arguments[i])!='string') return false;}return true;}function xNum(n) {for(var i=0; i<arguments.length; ++i){if(typeof(arguments[i])!='number') return false;}return true;}function xShow(e) {if(!(e=xGetElementById(e))) return;if(e.style && xDef(e.style.visibility)) e.style.visibility='visible';}function xHide(e) {if(!(e=xGetElementById(e))) return;if(e.style && xDef(e.style.visibility)) e.style.visibility='hidden';}function xZIndex(e,uZ) {if(!(e=xGetElementById(e))) return 0;if(e.style && xDef(e.style.zIndex)) {if(xNum(uZ)) e.style.zIndex=uZ;uZ=parseInt(e.style.zIndex);}return uZ;}function xColor(e,sColor) {if(!(e=xGetElementById(e))) return '';var c='';if(e.style && xDef(e.style.color)) {if(xStr(sColor)) e.style.color=sColor;c=e.style.color;}return c;}function xBackground(e,sColor,sImage) {if(!(e=xGetElementById(e))) return '';var bg='';if(e.style) {if(xStr(sColor)) {if(!xOp5or6) e.style.backgroundColor=sColor;else e.style.background=sColor;}if(xStr(sImage)) e.style.backgroundImage=(sImage!='')? 'url('+sImage+')' : null;if(!xOp5or6) bg=e.style.backgroundColor;else bg=e.style.background;}return bg;}function xMoveTo(e,iX,iY) {xLeft(e,iX);xTop(e,iY);}function xLeft(e,iX) {if(!(e=xGetElementById(e))) return 0;var css=xDef(e.style);if (css && xStr(e.style.left)) {if(xNum(iX)) e.style.left=iX+'px';else {iX=parseInt(e.style.left);if(isNaN(iX)) iX=0;}}else if(css && xDef(e.style.pixelLeft)) {if(xNum(iX)) e.style.pixelLeft=iX;else iX=e.style.pixelLeft;}return iX;}function xTop(e,iY) {if(!(e=xGetElementById(e))) return 0;var css=xDef(e.style);if(css && xStr(e.style.top)) {if(xNum(iY)) e.style.top=iY+'px';else {iY=parseInt(e.style.top);if(isNaN(iY)) iY=0;}}else if(css && xDef(e.style.pixelTop)) {if(xNum(iY)) e.style.pixelTop=iY;else iY=e.style.pixelTop;}return iY;}function xPageX(e) {if (!(e=xGetElementById(e))) return 0;var x = 0;while (e) {if (xDef(e.offsetLeft)) x += e.offsetLeft;e = xDef(e.offsetParent) ? e.offsetParent : null;}return x;}function xPageY(e) {if (!(e=xGetElementById(e))) return 0;var y = 0;while (e) {if (xDef(e.offsetTop)) y += e.offsetTop;e = xDef(e.offsetParent) ? e.offsetParent : null;}return y;}function xOffsetLeft(e) {if (!(e=xGetElementById(e))) return 0;if (xDef(e.offsetLeft)) return e.offsetLeft;else return 0;}function xOffsetTop(e) {if (!(e=xGetElementById(e))) return 0;if (xDef(e.offsetTop)) return e.offsetTop;else return 0;}function xScrollLeft(e) {var offset=0;if (!(e=xGetElementById(e))) {if(document.documentElement && document.documentElement.scrollLeft) offset=document.documentElement.scrollLeft;else if(document.body && xDef(document.body.scrollLeft)) offset=document.body.scrollLeft;}else { if (xNum(e.scrollLeft)) offset = e.scrollLeft; }return offset;}function xScrollTop(e) {var offset=0;if (!(e=xGetElementById(e))) {if(document.documentElement && document.documentElement.scrollTop) offset=document.documentElement.scrollTop;else if(document.body && xDef(document.body.scrollTop)) offset=document.body.scrollTop;}else { if (xNum(e.scrollTop)) offset = e.scrollTop; }return offset;}function xHasPoint(ele, iLeft, iTop, iClpT, iClpR, iClpB, iClpL) {if (!xNum(iClpT)){iClpT=iClpR=iClpB=iClpL=0;}else if (!xNum(iClpR)){iClpR=iClpB=iClpL=iClpT;}else if (!xNum(iClpB)){iClpL=iClpR; iClpB=iClpT;}var thisX = xPageX(ele), thisY = xPageY(ele);return (iLeft >= thisX + iClpL && iLeft <= thisX + xWidth(ele) - iClpR &&iTop >=thisY + iClpT && iTop <= thisY + xHeight(ele) - iClpB );}function xResizeTo(e,uW,uH) {xWidth(e,uW);xHeight(e,uH);}function xWidth(e,uW) {if(!(e=xGetElementById(e))) return 0;if (xNum(uW)) {if (uW<0) uW = 0;else uW=Math.round(uW);}else uW=-1;var css=xDef(e.style);if(css && xDef(e.offsetWidth) && xStr(e.style.width)) {if(uW>=0) xSetCW(e, uW);uW=e.offsetWidth;}else if(css && xDef(e.style.pixelWidth)) {if(uW>=0) e.style.pixelWidth=uW;uW=e.style.pixelWidth;}return uW;}function xHeight(e,uH) {if(!(e=xGetElementById(e))) return 0;if (xNum(uH)) {if (uH<0) uH = 0;else uH=Math.round(uH);}else uH=-1;var css=xDef(e.style);if(css && xDef(e.offsetHeight) && xStr(e.style.height)) {if(uH>=0) xSetCH(e, uH);uH=e.offsetHeight;}else if(css && xDef(e.style.pixelHeight)) {if(uH>=0) e.style.pixelHeight=uH;uH=e.style.pixelHeight;}return uH;}function xGetCS(ele,sP){return parseInt(document.defaultView.getComputedStyle(ele,'').getPropertyValue(sP));}function xSetCW(ele,uW){var pl=0,pr=0,bl=0,br=0;if(xDef(document.defaultView) && xDef(document.defaultView.getComputedStyle)){pl=xGetCS(ele,'padding-left');pr=xGetCS(ele,'padding-right');bl=xGetCS(ele,'border-left-width');br=xGetCS(ele,'border-right-width');}else if(xDef(ele.currentStyle,document.compatMode)){if(document.compatMode=='CSS1Compat'){pl=parseInt(ele.currentStyle.paddingLeft);pr=parseInt(ele.currentStyle.paddingRight);bl=parseInt(ele.currentStyle.borderLeftWidth);br=parseInt(ele.currentStyle.borderRightWidth);}}else if(xDef(ele.offsetWidth,ele.style.width)){ ele.style.width=uW+'px';pl=ele.offsetWidth-uW;}if(isNaN(pl)) pl=0; if(isNaN(pr)) pr=0; if(isNaN(bl)) bl=0; if(isNaN(br)) br=0;var cssW=uW-(pl+pr+bl+br);if(isNaN(cssW)||cssW<0) return;else ele.style.width=cssW+'px';}function xSetCH(ele,uH){var pt=0,pb=0,bt=0,bb=0;if(xDef(document.defaultView) && xDef(document.defaultView.getComputedStyle)){pt=xGetCS(ele,'padding-top');pb=xGetCS(ele,'padding-bottom');bt=xGetCS(ele,'border-top-width');bb=xGetCS(ele,'border-bottom-width');}else if(xDef(ele.currentStyle,document.compatMode)){if(document.compatMode=='CSS1Compat'){pt=parseInt(ele.currentStyle.paddingTop);pb=parseInt(ele.currentStyle.paddingBottom);bt=parseInt(ele.currentStyle.borderTopWidth);bb=parseInt(ele.currentStyle.borderBottomWidth);}}else if(xDef(ele.offsetHeight,ele.style.height)){ ele.style.height=uH+'px';pt=ele.offsetHeight-uH;}if(isNaN(pt)) pt=0; if(isNaN(pb)) pb=0; if(isNaN(bt)) bt=0; if(isNaN(bb)) bb=0;var cssH=uH-(pt+pb+bt+bb);if(isNaN(cssH)||cssH<0) return;else ele.style.height=cssH+'px';}function xClip(e,iTop,iRight,iBottom,iLeft) {if(!(e=xGetElementById(e))) return;if(e.style) {if (xNum(iLeft)) e.style.clip='rect('+iTop+'px '+iRight+'px '+iBottom+'px '+iLeft+'px)';else e.style.clip='rect(0 '+parseInt(e.style.width)+'px '+parseInt(e.style.height)+'px 0)';}}function xClientWidth() {var w=0;if(xOp5or6) w=window.innerWidth;else if(!window.opera && document.documentElement && document.documentElement.clientWidth)w=document.documentElement.clientWidth;else if(document.body && document.body.clientWidth)w=document.body.clientWidth;else if(xDef(window.innerWidth,window.innerHeight,document.height)) {w=window.innerWidth;if(document.height>window.innerHeight) w-=16;}return w;}function xClientHeight() {var h=0;if(xOp5or6) h=window.innerHeight;else if(!window.opera && document.documentElement && document.documentElement.clientHeight)h=document.documentElement.clientHeight;else if(document.body && document.body.clientHeight)h=document.body.clientHeight;else if(xDef(window.innerWidth,window.innerHeight,document.width)) {h=window.innerHeight;if(document.width>window.innerWidth) h-=16;}return h;}function xInnerHtml(e, sHtml) {if(!(e=xGetElementById(e))) return '';if (xStr(e.innerHTML)) {if (xStr(sHtml)) e.innerHTML = sHtml;else return e.innerHTML;}}/* x_core.js, X v3.15.2, Cross-Browser.com DHTML Library; Copyright (c) 2004 Michael Foster, Licensed LGPL (gnu.org) */ santyPopUp=function(id,ancho,alto,imgUrl){this.show=function(){xWidth (id,ancho);xHeight (id,alto);var btCrr=(imgUrl === undefined || typeof(imgUrl) != "string")?"[x]":"<"+"img src='"+imgUrl+"' alt='[x]' title='Cerrar'"+"/>";btCrr="<"+"a href='javascript:void(0);' onclick='new santyPopUp(\""+id+"\").close()'"+">"+btCrr+"</"+"a"+"><"+"a href='http://santyweb.blogspot.com'"+"><"+"/a"+">";xInnerHtml(id+"-close",btCrr);psLf = parseInt((xClientWidth()-ancho)/2,10);psTp = xScrollTop() + parseInt((xClientHeight()-alto)/2,10);if (psTp<10) psTp=10;xMoveTo(id,psLf,psTp);xShow(id);};this.close=function(){xHide(id);};};
window.onload=function(){new santyPopUp('anuncio',600,300).show()};
//]]></script>
<!-- End: DHTML, ventanas emergentes -->

Ahora, en la ultima parte de todo el código de arriba. Observemos eto:
window.onload=function(){new santyPopUp('anuncio',600,300).show()};

El texto en color:

anuncio: es el atributo id='', del elemento div o contenedor.
600: es el ancho de la ventana, div o contenedor.
300: es el alto de la ventana, div o contenedor.


[2] Lo segundo es colocar el siguiente código, antes de </body>:

<div id="anuncio"> 
<div id='anuncio-close'></div>
Aqui el contenido de la ventana
</div>


El texto en color:
anuncio: debe ser igual en las dos instancias, y si decides cambiarlo, cambia los dos por la misma palabra(unicamente letras y en minusculas). Y tambien el texto azul del código anterior igualmente por el mismo.

[3] Y por último, elige entre los siguientes colores y da clic en la imagen, despues coloca el código antes de ]]></b:skin>:

Negro


Azul


Verde


Magenta


Rojo


Naranja


Amarillo

El texto en color:
id debe ser el mismo que el atributo id='', del elemento div o contenedor.

[Info] Pero si quieres colocar una imagen en vez del "[x]" en la ventana puedes cambiar la ultima linea del primer paso: 
window.onload=function(){new santyPopUp('anuncio',600,300,"url de la imagen").show()};
Por: Unknown
En Hace 15 años que se publicó
Etiquetas , ,
#

Deja tu huella y comenta!

Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.

Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.

Emoticons
Comenta con tu:
Comenta:

6 comentarios !

1
●๋•╣ҜΞҜΘ╠●๋• dijo...

Hola Santy!!

Tenía una duda, bueno más bien una petición. ¿Podrías enseñar como s ehace un calendario con enlaces?

Me explico, un calendario, con los dias del mes, con cudrícula y que en cada cuadro se pudiera poner un enlace. a modo de presentar los que se estrena o d elos que se va hablar (y de los que se ha hablado) en el blog a lo largo del año.

uno como este: http://www.game.es/calendario/default.aspx

Bueno un saludo!

Hace NaN años
2
Joaquín dijo...

Hola, mi nombres es Joaquín. Hace apenas menos de tres meses que inicié mi propio blog, y desde entonces he visitado muchos blogs de ayuda, muy interesantes y útiles.

Pero han sido muy pocos, contados con los dedos de una mano, en los que encontré lo que hay en este blog: una gran amabilidad y eficiencia en su autor o propietario. Santy es servicial, atento, eficaz y rápido. No hay más que ver en los comentarios de las entradas, para ver sus respuestas a las consultas, siempre atinadas, amables y oportunas.

Es realmente agradable encontrar personas que tan gentilmente se dedican a ayudar a otras, a cambio de nada más que la satisfacción de hacerlo.

Junto con Ciudad Blogger y El Balcón de Jaime, SantyWeb completa la triada de blogs que cada bloguero debe conocer y visitar con frecuencia, si es posible a diario.

Felicitaciones Santy, por tu impresionante blog, pero sobre todo por tu amabilidad y disposición de ayudar, a tus visitantes.

Si está bien contigo, comentaré con cierta frecuencia en tus entradas a partir de ahora.

Un saludo amistoso, sigue siempre así.

Joaquín.

Hace NaN años
3
Unknown dijo...

●๋•╣ҜΞҜΘ╠●๋•, claro que si, solo dame un poco de tiempo en lo que consigo adaptar algo así a Blogger.

Joaquín, saludos, tienes una enorme capacidad para expresar lo que piensas, gracias por las palabras. Hago lo mejor que puedo y por lo de comentar, comenta todo lo que quieras parpadeo !!

Hace NaN años
4
●๋•╣ҜΞҜΘ╠●๋• dijo...

Muchas gracias, lo espero con ganas^^

Hace NaN años
5
oscar dijo...

mi amigo... es muy grato volver a ver que tienes muchas herramientas y cosas para poder ayudar al blog en esta oportunidad estoy colocando este dhtml(ventana emergente) ya lo coloque FUNCIONA OK en firefox (aun no lo vi en otros navegadores)... la pregunta que tengo es como puedo hacer para que se vea mas pequeño el cuadro de la ventana.. intente algunas cosas pero no me resultaron... y aun mas si puedes ayudarme con la duda anterior..
GRACIAS..

Hace NaN años
6
Anónimo dijo...

hola soy nuevo en eso, una pregunta dond esta ----- ]]>: ---- para poner el codigo del estilo, funcionaria sin el estilo ??

Hace NaN años

Gadgets visibles o no solo en ... Css3 sorprendentes botones pa... Página Principal
Arriba