Fenêtres popup et iframe


  • Les fenètres popup responsive sont moins spectaculaires que les popup classiques. Dans de petites résolutions, elles peuvent occulter la page porteuse.
  • 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

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

Fenêtre popup réactive

Le déclencheur (trigger) avec son icône "courriel" orange, à droite de cette page, se déplace sur toute sa longueur, en suivant l' ascenceur. Ce popup contient un formulaire de contact.

code CSS avec l' icône à droite de la page


.popup-trigger3 { display: block; color: orange;width:35px;position:fixed; top: 300px;left:7px; text-align: center; text-transform: uppercase; cursor: pointer; }
 

Pour les codes HTML et Javascript voyez ceux de "Plusieurs fenêtres popup" ci-dessous

Plusieurs fenêtres popup

Dans une DIV de votre page

Les deux icônes sont liées chacune à un déclencheur (trigger) différent. Ces "triggers" lancent chacun leur fenêtre popup. Il est possible dans certaines configurations de n' avoir qu' un "trigger" pour deux fenêtres popup différentes comme pour cette demo basique à Stanhub.com, dont je me suis inspiré du code Javascript.

HTML

<a class="popup-trigger" rel="nofollow"><i class="fa fa-info-circle fa-2x"></i></a>
               <div class="popup">
           Entrer votre texte ici
<span class="popup-btn-close"><i class="fa fa-times"></i></span>
                    </div>
<a class="popup-trigger2" rel="nofollow"><i class="fa fa-envelope fa-2x"></i></a>
               <div class="popup">
           Entrer votre code HTML ici
<span class="popup-btn-close"><i class="fa fa-times"></i></span>
                    </div>
		

Javascript avec jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
                <script>
		// Popup Window
		var scrollTop = '';
		var newHeight = '100';

		$(window).bind('scroll', function() {
		   scrollTop = $( window ).scrollTop();
		   newHeight = scrollTop + 100;
		});
                $('.popup-trigger').click(function(e) {
  		 e.stopPropagation();
		 if(jQuery(window).width() < 767) {
		   $(this).after( $(this).nextAll('.popup:first') );
		   $(this).nextAll('.popup:first').show().addClass('popup-mobile').css('top', 0);
		   $('html, body').animate({
				scrollTop: $(this).nextAll('.popup:first').offset().top
			}, 500);
		 } else {
			 $('.popup').hide();
			 $(this).nextAll('.popup:first').removeClass('popup-mobile').css('top', newHeight).toggle();
		 };
		});

		$('.popup-trigger2').click(function(e) {
  		 e.stopPropagation();
		 if(jQuery(window).width() < 767) {
		   $(this).after( $(this).nextAll('.popup:first') );
		   $(this).nextAll('.popup:first').show().addClass('popup-mobile').css('top', 0);
		   $('html, body').animate({
				scrollTop: $(this).nextAll('.popup:first').offset().top
			}, 500);
		 } else {
			 $('.popup').hide();
			 $(this).nextAll('.popup:first').removeClass('popup-mobile').css('top', newHeight).toggle();
		 };
		});

		$('html').click(function() {
		 $('.popup').hide();
		});

		$('.popup-btn-close').click(function(e){
		  $(this).parent().hide();
		});

		$('.popup').click(function(e){
		  e.stopPropagation();
		});
		</script>

CSS

/*Il faudra construire une nouvelle DIV avec une marge suffisante à gauche pour placer les icônes.
Les "triggers" devront être en position:relative*/
.main {margin:0px 0px 0px 48px;}
.popup-trigger { display: block; color: #72ae00;width:35px; position:relative ; top: -150px; left:-1px; text-align: center; text-transform: uppercase; cursor: pointer; }

.popup-trigger2 { display: block; color: #72ae00;width:35px; position:relative; top: -120px;left:-1px; text-align: center; text-transform: uppercase; cursor: pointer; }

.popup {display: none; position: absolute; top: 100px; left: 50%; max-width: 500px; margin-left: -350px; padding: 50px 30px;border-radius:10px;
  					background: #fff; color: #333; font-size: 14px; line-height: 1.5; z-index: 9999;}
  			.popup-mobile {position: relative; top: 0; left: 0; margin: 30px 0 0; max-width: 100%;text-transform: lowercase ;}
  		    .popup-btn-close {position: absolute; top: 8px; right: 14px; color: #72ae00; font-size: 1em; font-weight: bold; text-transform: no; cursor: pointer;}

Les Lightbox

Les Lightbox sont aussi des fenêtres popup
Au départ il s' agit d' agrandir une image en plein écran. Cela ce faisait déjà en HTML pur code en cliquant sur une image-lien

<a href="https://wubijacq.com/rwd/img/tournesols-b.jpg"> <img src="img/tournesols-e.jpg"></a>

Un clic sur l' image ouvre simplement une nouvelle fenêtre de votre navigateur mais vous n' avez pas de bouton ou une croix de fermeture.

W3Schools

Avec ce Lightbox minimaliste, que vous propose W3Schools, vous n' aurez pas besoin de fichiers complémentaires mais une bonne configuration manuelle peut être utile (par exemple si votre photo est en mode portrait).

W3Schools Modal Images

Tournesols

Un clic dans l' image vous ouvre ce lightbox avec une croix de fermeture et un petit intitulé.

Magnific Popup

Dans le Magnific Popup de Semenov, pour ouvrir une fenêtre popup, il faut un déclencheur (trigger). Ce déclencheur est composé d' un script (Javascript) lié à un attribut CLASS ajouté à l' URL de l' image destinée à remplir le lightbox. Nécessite 2 fichiers JS et un fichier CSS complémentaires.

Lightbox Gallery de Magnific Popup

Colorbox de Jack Moore

Connu depuis longtemps, son avantage est la possibilité de personnaliser le lightbox en ajoutant un texte descriptif par exemple, simplement en modifiant le fichier CSS.

Jackmoore Colorbox

 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="url" height="450" width="100%" frameborder="0" scrolling="no"</iframe>
Annonce Google

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