Wubijacq.comFenê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.
Sur écrans de moins de 800px, le texte de la page principale s' efface à l' apparition d' un popup.
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).
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.
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
Certaines vidéos doivent être contenues à l' intérieur d' une fenêtre iframe pour être affichées sur votre blog. Ce sont les vidéos provenant d' une plateforme de diffusion vidéographique comme Youtube ou VKontakte
Iframe et page web
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;
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
