Fenêtre popup et fenêtre iframe

  • La fenêtre POPUP ou fenêtre surgissante est une page généralement de dimension plus petite que votre page courante, qui se superpose à cette page courante lorsque vous cliquez sur un lien (javascript).
  • La fenêtre IFRAME est comme une lucarne découpée dans votre page courante, derrière laquelle apparait une autre page.
codes pour PC et Laptop 



La fenêtre POPUP


Un lien, cela ne prend pas beaucoup de place dans une page et cette fenêtre popup peut permettre d' ajouter des précisions ayant un rapport avec le sujet de votre rubrique
Il ne faut pas non plus trop en abuser car cela peut devenir fatiguant pour le visiteur., Il est possible de faire se balader cette fenêtre Popup dans toute la page courante
Laissez la possibilité au visiteur, de pouvoir fermer cette fenêtre
La page contenue dans la fenêtre est une page HTML avec parfois, simplement l'extension HTM.
Elle sera propulsée à partir d' un lien Javascript se trouvant dans la page HTML courante
  • Pour ouvrir la fenêtre POPUP simple, le code javascript du lien contient l' adresse de la page popup mais aussi sa configuration et devra s'écrire sur une seule ligne dans votre page
  • Pour ouvrir la page POPUP qui bouge, le code étant plus chargé, le lien <a href="javascript:movingWin();"> ouvrira la fenêtre avec un script dans la page courante qui contiendra la configuration de la page popup et les coordonnées de l' animation.



Affichage en haut à gauche
Popup simple

<a href="#"onclick="Popup=window.open('url de la page popup','Popup','toolbar=no,status=no,menubar=no,scrollbars=no,resizable=no,width=250,height=250,left=10 top=10');return false;">Lien</a>


Descente en diagonale
Popup animé

script original de sivamdesign.com



.

Popup panneau latéral coulissant

S' ouvre comme un tiroir, avec un clic sur un bouton positionné à gauche de l' écran, cette fenêtre popup est plus mobile-friendly que les précédentes devenues obsolètes sur des appareils mobiles.


.

Les fenêtres popup réactives (responsive)

Ressemblent parfois à de nouvelles pages web sur les appareils mobiles mais aussi à de grosses info-bulles sur les écrans de PC et Laptops

popup réactives


.

Les infobulles (tooltips)

Peuvent-elle être considérérées comme des fenêtres popup ?
Le glossaire d' un site affiche des info-bulles.
"TITLE", attribut universel, donne une information textuelle sur un mot ou un morceau de texte (simplement avec du HTML pur code) au survol de la souris.
Mais TITLE n' est pas personnalisable, son infobulle change seulement d' aspect selon le navigateur.
L' info-bulle peut aussi faire apparaiitre une image et cela nécessite un minimum de CSS.
Bootstrap fournit des infobulles en javascript


La fenêtre IFRAME



Avec les ascenseurs (scrollbars)
(Une page HTML de mon site)



code
<iframe src="http://www.wubijacq.com/swf/mer-et-soleil.html"
width=320px height=220px ></iframe>




Sans les ascenseurs, sans bordures
Parfois, l'exercice consiste à laisser croire aux internautes que cette fenêtre fait partie de la page courante, en cachant les bordures de la lucarne (FRAMEBORDER=0)

code
<iframe src="http://www.wubijacq.com/files/faux-paragraphe.htm"
frameborder=0 width=100% height=330px></iframe>


(C'est une autre page HTM de mon site)
Donc, le paragraphe suivant est une fenêtre IFRAME et ne fait pas partie de la page courante




Pour faire disparaitre automatiquement toutes les barres de défilement, horizontales et verticales :
Laisser une hauteur et une largeur suffisante à l' IFRAME ou
frameborder=0 scrollbar=no

Fenêtres iframe responsive


.

statistiques

who's.amung.us
  Partager



www.wubijacq.com Cliquez ici pour vous abonner à ce flux RSS