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

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

Le déclencheur (trigger) avec son icône orange, à droite de cette page, se déplace sur toute sa longueur, en suivant l' ascenceur. Ce popup vous propose souvent de vous abonner à une newsletter.

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;}


 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>

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