Comment rendre une thickbox responsive.
Edit, 1 jour plus tard:
Installez Magnific Popup et configurez un pop up inline .
Il est plus léger et surtout plus responsive.
Aujourd’hui, un bout de code en jQuery pour ces développeurs de thème WordPress qui utilisent Thickbox, la fenêtre modale inclue dans WordPress pour afficher des fenêtres modales dans leurs thèmes .
Si vous ne savez pas comment utilisez ThickBox dans un thème wordpress, cliquez ici .
Pour les autres, rajoutez ce bout de code dans le pied de page ou dans un fichier scripts.js que vous invoquerez ensuite dans le pied de page de votre thème : il permet d’adapter, de façon dynamique, la taille de votre thickbox à la taille de l’écran.
(function ($) {
$(window).resize(function() {
var newHeight = $(window).height();
// console.log(newHeight);
var newWidth = $(window).width();
// console.log(newWidth);
$("#TB_window").css("height", (newHeight));
$("#TB_window").css("width", (newWidth));
$('#TB_ajaxContent').css("width", (newWidth));
$("#TB_window").css("margin-left", -(parseInt((newWidth)/2)));
// $("#TB_window").css("margin-left", (-newWidth)/2);
});
/* trigger when page is ready */
$(window).load(function() {
var newHeight = $(window).height();
// console.log(newHeight);
var newWidth = $(window).width();
// console.log(newWidth);
$("#TB_window").css("height", (newHeight));
$("#TB_window").css("width", (newWidth));
$('#TB_ajaxContent').css("width", (newWidth));
$("#TB_window").css("margin-left", -(parseInt((newWidth)/2)));
});
}(window.jQuery || window.$));
Jean-Luc Houédanou est un blogueur spécialisé dans l’innovation et la transformation numérique, avec une expérience en développement web front-end. Après avoir obtenu un Master en gestion du commerce électronique de l’Université de Sherbrooke, il a travaillé sur des projets d’envergure mondiale pour diverses entreprises, startups et organisations internationales. Il est également impliqué dans des projets communautaires et technologiques en Afrique.
Il aide, par le biais de ce blog, les lecteurs à s’adapter aux évolutions rapides de la technologie et des tendances du marché.
En plus de ses articles sur l’innovation et la transformation numérique, Jean-Luc Houédanou écrit également des colonnes d’opinion et donne des conseils sur le bien-être mental. Son objectif est d’aider les lecteurs à se développer personnellement et professionnellement, en leur fournissant des conseils pratiques pour gérer le stress et améliorer leur qualité de vie.