Fenêtres popup et iframe


  • Les fenètres popup responsive sont moins spectaculaires que les popup classiques, mais évidemment elles passent mieux sur les appareils mobiles
  • La fenètre iframe réactive (responsive web design) est une lucarne, découpée dans une page web. Elle n' a plus de dimensions fixes car la page qui la supporte doit s' adapter aussi à diverses résolutions d' écran.

 Les fenêtres Popup

La fenêtre modale

En responsive web design certaines fenêtres popup sont souvent appelées fenètres modales. Initialement, ce sont des fenêtres apparaissant au centre de l' écran dans les systèmes d' exploitation, obéissant au clic de la souris, mais aussi au clavier.

Explication dans jolicode.com

Il est possible de créer une fenétre rien qu' avec HTML et CSS

Fenêtre popup réactive basique

Il n' est plus nécessaire de créer une autre page (popup) qui apparaitra au dessus de la page courante. Tout le code peut être contenu dans une seule page web. La page principale, elle-même, génère ses fenêtres popup

Il s' agit donc d' une page réactive (RWD) contenant dans son code une fenêtre popup et son déclencheur (trigger).
Notez que une seule page peut déclencher plusieurs fenêtres popup.

Demo

 La fenêtre Iframe

réactive est surtout utilisée pour intégrer des vidéos Youtube pouvant être lue sur smartphone.

Iframe et Vidéo

CSS


.conteneur {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.conteneur iframe, .conteneur object, .conteneur embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

HTML

clic-droit sur la vidéo et "Copier le code d' intégration".
allow="autoplay; encrypted-media" n' est pas toujours indispensable dans le code. <div class=conteneur>
<iframe src="https://www.youtube.com/embed/QnmJEHjPuIU" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>
</div>

Résultat

Pour afficher proprement une page web ou une partie d' une page web (un formulaire par exemple), dans une fenêtre iframe, utiliser le ratio est assez pénible. Je privilégerai du javascript. D' abord un fichier JS très simple à copier-coller dans une page à part. Personnellement, j' ai placé ce fichier que j' ai nommé autoheight.js dans le dossier js de mon site;

  autoheight.js

puis à l' endroit ou j' ai placé mon iframe

<script src=text/javascript src=js/autoheight.js></script>
<iframe class="autoHeight" src="stanhub.htm" height="450" width="100%" frameborder="0" scrolling="no"</iframe>

Cette fenêtre IFRAME affiche une page lanceuse de deux fenêtres popup. Outre ses affinités pour le camouflage dont j' ai tiré parti, elle permet de ne pas surcharger la page courante avec des feuilles de style appartenant aux pages intégrées.

Demo basique à Stanhub.com

Logiciels les plus téléchargés

Les DEBs XnViewMP-linux et les MSI IsoRecorder et Gpick sont actuellement les logiciels les plus demandés sur wubijacq.com