2.7 KiB
fr: Sur ce blog, je donne parfois la possibilité de télécharger certaines sources de code.
fr: Dans ce cas, le code est souvent plus large que le div qui le contient.
fr: Le texte est alors coupé.
fr: C'est pourquoi, j'utilise une méthode qui permet d'afficher ces sources dans de grandes popups en jQuery.
en: Some source code on this blog can be downloaded.
en: Most of time, the code is larger than the div bloc.
en: This is why I use a method to show this code in a large jQuery popup.
fr: Vous pouvez faire un essai en cliquant le code suivant ; remarquez qu'un bout du code n'est pas visible (après z-index normallement) :
en: You can try clicking the following code ; remark that the content is cutted a bit after z-index:
// --- code popup ---
function openPopup() {
$(this).clone(false).appendTo($("#_code"));
$("#_code").show();
}
function closePopup() {
$("#_code").html("");
$("#_code").hide();
}
function initCode() {
$(".code").click(openPopup);
$(".code").css({cursor: "pointer"});
$('body').append('
');
$('#_code').css( { 'text-align': "justify", position: "fixed",
left:0, top:0, width: "100%", height: "100%",
"background-color": "rgba(0, 0, 0, 0.8)", 'z-index':2000, 'padding':'3px'} );
$('#_code').hide();
$('#_code').click(closePopup);
}
// --- end of code popup section ---
fr: Ce code est celui qui permet d'obtenir cet effet. en: This code is the one I use to obtain this result.
fr: Que fait-il ? en: What does it do?
fr: Au chargement de la page je crée un div grand comme toute la page avec un fond légèrement transparent que je cache.
fr: Je fais bien attention à son z-index pour qu'il soit devant tout le reste.
en: At the loading of the page, I create a div as wide as the window.
en: This div is a bit transparent. Then I hide it. I also take care to its z-index value to be sure it is behind all elements.
fr: Puis lorsque l'on clique sur un div de class code,
fr: je recopie le contenu de celui-ci dans le grand div que je rend visible.
fr: Très simple mais très efficace.
fr: Pas besoin d'utiliser un plugin jQuery.
en: Then when we click on a div of class code, I copy the content into this new wide div, and I show it.
en: Really simple but really efficient.
en: No need to use a jQuery plugin.