1.5 KiB
1.5 KiB
| isHidden | menupriority | kind | created_at | title | author_name | author_uri | tags | |||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| false | 1 | article | 2010-06-19T00:44:50+02:00 | Comment faire des popups en jQuery rapidement | Yann Esposito | yannesposito.com |
|
Voici une façon simple et rapide pour faire des popups avec jQuery.
// --- 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 ---
Que fait ce code ?
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.
Je fais bien attention à son z-index pour qu'il soit devant tout le reste.
Puis lorsque l'on clique sur un div de class code,
je recopie le contenu de celui-ci dans le grand div que je rend visible.
Très simple mais très efficace.
Pas besoin d'utiliser un plugin jQuery.