Les finestres emergents amb una gran varietat de propòsits tenen molts usos en la construcció de webs. Es poden utilitzar per crear diversos tipus de menús, col·locar textos i gràfics publicitaris, consells d’informació a l’hora d’emplenar formularis complexos, i és convenient col·locar els formularis ells mateixos en finestres que no ocupen espai a la pàgina. Al nostre article trobareu una descripció de com podeu fer aquesta finestra.
És necessari
Coneixements bàsics d'HTML
Instruccions
Pas 1
popup, html, capa oculta
Pas 2
A moltes pàgines del web, podeu veure que s’utilitzen biblioteques elegants de diversos marcs JavaScript (jQuery, MooTools, Prototype, etc.) per crear finestres emergents a les pàgines. Tanmateix, de fet, no són necessaris a l’hora de resoldre aquest problema concret. Les eines disponibles en el llenguatge de marcatge d’hipertext (HTML) i en fulls d’estil en cascada (CSS) són suficients per crear finestres emergents. Les finestres creades d'aquesta manera funcionaran independentment de si JavaScript està habilitat al navegador del visitant.
Tot el codi que crea la finestra emergent es pot col·locar en dues línies. La primera línia crea un enllaç al qual cal fer clic per mostrar la finestra emergent:
Clica aquí!
Aquí, l'atribut onmouseover de l'etiqueta d'enllaç estableix el tipus de cursor per defecte per als enllaços. L'atribut onclick especifica que quan es fa clic a l'enllaç, el bloc ocult PopUp s'hauria de fer visible.
La segona línia és, de fet, la finestra emergent. Capa amb l'identificador PopUp i la mida de la finestra, el color i la mida del text, el fons i la vora especificats a l'atribut d'estil:
Aquest és el text de la finestra emergent
No és visible per defecte: ho indica el selector de visualització amb un valor de cap a la descripció de l'estil de capa.
De fet, això és tot el que necessiteu per crear una finestra emergent: col·loqueu aquestes dues línies entre les etiquetes i la pàgina i ja està a punt.
Pas 3
Per poder tancar la finestra emergent que hi ha davant de l'etiqueta, heu d'afegir un enllaç que realitzi l'acció contrària: ocultant la capa visible amb l'identificador PopUp:
Tanca
Pas 4
I si voleu que aparegui la finestra no fent clic, sinó passant el cursor del ratolí, la primera línia amb l'enllaç s'ha de modificar d'aquesta manera:
mou el ratolí cap aquí!
Pas 5
Ara coneixeu el principi i l’estructura del codi de la finestra emergent i el disseny de la seva aparença i contingut depèn completament dels vostres objectius i imaginació.
