2010-08-23 12:26:48 +00:00
<?xml version="1.0" encoding="utf-8"?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" lang = "fr" xml:lang = "fr" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" / >
< meta name = "keywords" content = "jQuery, javascript, popup, blog, web" >
< link rel = "shortcut icon" type = "image/x-icon" href = "/Scratch/img/favicon.ico" / >
< link rel = "stylesheet" type = "text/css" href = "/Scratch/assets/css/main.css" / >
< link rel = "stylesheet" type = "text/css" href = "/Scratch/css/twilight.css" / >
< link rel = "stylesheet" type = "text/css" href = "/Scratch/css/idc.css" / >
< link rel = "alternate" type = "application/rss+xml" title = "RSS" href = "http://feeds.feedburner.com/yannespositocomfr" / >
< link rel = "alternate" lang = "fr" xml:lang = "fr" title = "Comment faire des popups en jQuery rapidement" type = "text/html" hreflang = "fr" href = "/Scratch/fr/blog/2010-06-19-jQuery-popup-the-easy-way/" / >
< link rel = "alternate" lang = "en" xml:lang = "en" title = "jQuery popup the easy way" type = "text/html" hreflang = "en" href = "/Scratch/en/blog/2010-06-19-jQuery-popup-the-easy-way/" / >
< script type = "text/javascript" src = "/Scratch/js/jquery-1.3.1.min.js" > < / script >
< script type = "text/javascript" src = "/Scratch/js/jquery.cookie.js" > < / script >
< script type = "text/javascript" src = "/Scratch/js/index.js" > < / script >
< title > Comment faire des popups en jQuery rapidement< / title >
< / head >
< body lang = "fr" >
< script type = "text/javascript" > / / < ! [ C D A T A [
document.write('< div id = "blackpage" > < img src = "/Scratch/img/loading.gif" alt = "Chargement en cours..." / > < / div > ');
// ]]>
< / script >
< div id = "content" >
2010-09-27 18:49:15 +00:00
< div id = "choix" >
< div class = "return" > < a href = "#entete" > ↓ Menu ↓ < / a > < / div >
< div id = "choixlang" >
< a href = "/Scratch/en/blog/2010-06-19-jQuery-popup-the-easy-way/" onclick = "setLanguage('en')" > in English< / a >
< / div >
< / div >
< img src = "/Scratch/img/presentation.png" alt = "Presentation drawing" / >
2010-08-23 12:26:48 +00:00
< div id = "titre" >
< h1 >
Comment faire des popups en jQuery rapidement
< / h1 >
< / div >
< div class = "flush" > < / div >
< div class = "flush" > < / div >
< div id = "afterheader" >
< div class = "corps" >
< p > Sur ce blog, je donne parfois la possibilité de télécharger certaines sources de code.
Dans ce cas, le code est souvent plus large que le < code > div< / code > qui le contient.
Le texte est alors coupé.
C’ est pourquoi, j’ utilise une méthode qui permet d’ afficher ces sources dans de grandes < em > popups< / em > en jQuery.< / p >
< p > Vous pouvez faire un essai en cliquant le code suivant ; remarquez qu’ un bout du code n’ est pas visible (après < code > z-index< / code > normallement) :< / p >
< div class = "code" > < div class = "file" > < a href = "/Scratch/fr/blog/2010-06-19-jQuery-popup-the-easy-way/code/essai.js" > ➥ essai.js < / a > < / div > < div class = "withfile" >
< pre class = "twilight" >
< span class = "Comment" > < span class = "Comment" > //< / span > --- code popup ---< / span >
< span class = "Storage" > function< / span > < span class = "Entity" > openPopup< / span > () {
< span class = "Keyword" > $< / span > (< span class = "Variable" > this< / span > ).clone(< span class = "Constant" > false< / span > ).appendTo(< span class = "Keyword" > $< / span > (< span class = "String" > < span class = "String" > " < / span > #_code< span class = "String" > " < / span > < / span > ));
< span class = "Keyword" > $< / span > (< span class = "String" > < span class = "String" > " < / span > #_code< span class = "String" > " < / span > < / span > ).show();
}
< span class = "Storage" > function< / span > < span class = "Entity" > closePopup< / span > () {
< span class = "Keyword" > $< / span > (< span class = "String" > < span class = "String" > " < / span > #_code< span class = "String" > " < / span > < / span > ).html(< span class = "String" > < span class = "String" > " < / span > < span class = "String" > " < / span > < / span > );
< span class = "Keyword" > $< / span > (< span class = "String" > < span class = "String" > " < / span > #_code< span class = "String" > " < / span > < / span > ).hide();
}
< span class = "Storage" > function< / span > < span class = "Entity" > initCode< / span > () {
< span class = "Keyword" > $< / span > (< span class = "String" > < span class = "String" > " < / span > .code< span class = "String" > " < / span > < / span > ).< span class = "SupportFunction" > click< / span > (openPopup);
< span class = "Keyword" > $< / span > (< span class = "String" > < span class = "String" > " < / span > .code< span class = "String" > " < / span > < / span > ).css({cursor: < span class = "String" > < span class = "String" > " < / span > pointer< span class = "String" > " < / span > < / span > });
< span class = "Keyword" > $< / span > (< span class = "String" > < span class = "String" > '< / span > body< span class = "String" > '< / span > < / span > ).append(< span class = "String" > < span class = "String" > '< / span > < div id=" _code" > < /div> < span class = "String" > '< / span > < / span > );
< span class = "Keyword" > $< / span > (< span class = "String" > < span class = "String" > '< / span > #_code< span class = "String" > '< / span > < / span > ).css( { < span class = "String" > < span class = "String" > '< / span > text-align< span class = "String" > '< / span > < / span > : < span class = "String" > < span class = "String" > " < / span > justify< span class = "String" > " < / span > < / span > , position: < span class = "String" > < span class = "String" > " < / span > fixed< span class = "String" > " < / span > < / span > ,
left:< span class = "Constant" > 0< / span > , top:< span class = "Constant" > 0< / span > , width: < span class = "String" > < span class = "String" > " < / span > 100%< span class = "String" > " < / span > < / span > , height: < span class = "String" > < span class = "String" > " < / span > 100%< span class = "String" > " < / span > < / span > ,
< span class = "String" > < span class = "String" > " < / span > background-color< span class = "String" > " < / span > < / span > : < span class = "String" > < span class = "String" > " < / span > rgba(0, 0, 0, 0.8)< span class = "String" > " < / span > < / span > , < span class = "String" > < span class = "String" > '< / span > z-index< span class = "String" > '< / span > < / span > :< span class = "Constant" > 2000< / span > , < span class = "String" > < span class = "String" > '< / span > padding< span class = "String" > '< / span > < / span > :< span class = "String" > < span class = "String" > '< / span > 3px< span class = "String" > '< / span > < / span > } );
< span class = "Keyword" > $< / span > (< span class = "String" > < span class = "String" > '< / span > #_code< span class = "String" > '< / span > < / span > ).hide();
< span class = "Keyword" > $< / span > (< span class = "String" > < span class = "String" > '< / span > #_code< span class = "String" > '< / span > < / span > ).< span class = "SupportFunction" > click< / span > (closePopup);
}
< span class = "Comment" > < span class = "Comment" > //< / span > --- end of code popup section ---< / span >
< / pre >
< / div > < / div >
< p > Ce code est celui qui permet d’ obtenir cet effet.< / p >
< p > Que fait-il ?< / p >
< p > Au chargement de la page je crée un < code > div< / code > grand comme toute la page avec un fond légèrement transparent que je cache.
Je fais bien attention à son < code > z-index< / code > pour qu’ il soit devant tout le reste.< / p >
< p > Puis lorsque l’ on clique sur un < code > div< / code > de class < code > code< / code > ,
je recopie le contenu de celui-ci dans le grand < code > div< / code > que je rend visible.
Très simple mais très efficace.
Pas besoin d’ utiliser un plugin < code > jQuery< / code > .< / p >
< / div >
< div id = "choixrss" >
< a id = "rss" href = "http://feeds.feedburner.com/yannespositocomfr" >
s'abonner
< / a >
< / div >
< script type = "text/javascript" >
$(document).ready(function(){
$('#comment').hide();
$('#clickcomment').click(showComments);
});
function showComments() {
$('#comment').show();
$('#clickcomment').fadeOut();
}
document.write('< div id = "clickcomment" > Commentaires< / div > ');
< / script >
< div class = "flush" > < / div >
< div class = "corps" id = "comment" >
< h2 class = "first" > commentaires< / h2 >
< noscript >
< / noscript >
< script type = "text/javascript" >
var idcomments_acct = 'a307f0044511ff1b5cfca573fc0a52e7';
var idcomments_post_id = '/Scratch/fr/blog/2010-06-19-jQuery-popup-the-easy-way/';
var idcomments_post_url = 'http://yannesposito.com/Scratch/fr/blog/2010-06-19-jQuery-popup-the-easy-way/';
< / script >
< span id = "IDCommentsPostTitle" style = "display:none" > < / span >
< script type = 'text/javascript' src = '/Scratch/js/genericCommentWrapperV2.js' > < / script >
< / div >
< div id = "entete" class = "corps_spaced" >
< div id = "liens" >
2010-09-17 14:22:38 +00:00
< ul > < li > < a href = "/Scratch/fr/" > Accueil< / a > < / li >
2010-08-23 12:26:48 +00:00
< li > < a href = "/Scratch/fr/blog/" > Blog< / a > < / li >
2010-09-30 13:01:14 +00:00
< li > < a href = "/Scratch/fr/softwares/" > Softwares< / a > < / li >
2010-09-28 01:00:51 +00:00
< li > < a href = "/Scratch/fr/about/" > À propos< / a > < / li > < / ul >
2010-08-23 12:26:48 +00:00
< / div >
< div class = "flush" > < / div >
< hr / >
< div id = "next_before_articles" >
< div id = "previous_articles" >
articles précédents
< div class = "previous_article" >
2010-09-28 15:10:12 +00:00
< a href = "/Scratch/fr/blog/2010-06-17-hide-yourself-to-analytics/" > < span class = "nicer" > «< / span > Se cacher de ses statistiques web< / a >
2010-08-23 12:26:48 +00:00
< / div >
< div class = "previous_article" >
2010-09-28 15:10:12 +00:00
< a href = "/Scratch/fr/blog/2010-06-17-track-events-with-google-analytics/" > < span class = "nicer" > «< / span > Analyser les clicks sur votre Site< / a >
2010-08-23 12:26:48 +00:00
< / div >
< div class = "previous_article" >
2010-09-28 15:10:12 +00:00
< a href = "/Scratch/fr/blog/2010-06-15-Get-my-blog-engine/" > < span class = "nicer" > «< / span > Récupérez mon système de blog< / a >
2010-08-23 12:26:48 +00:00
< / div >
< / div >
< div id = "next_articles" >
articles suivants
< div class = "next_article" >
2010-09-28 15:10:12 +00:00
< a href = "/Scratch/fr/blog/2010-07-05-Cappuccino-and-Web-applications/" > Cappuccino ou jQuery ? < span class = "nicer" > »< / span > < / a >
2010-08-23 12:26:48 +00:00
< / div >
< div class = "next_article" >
2010-09-28 15:10:12 +00:00
< a href = "/Scratch/fr/blog/2010-07-07-CSS-rendering-problems-by-navigator/" > N'utilisez pas de gradients avec Chrome < span class = "nicer" > »< / span > < / a >
2010-08-23 12:26:48 +00:00
< / div >
< div class = "next_article" >
2010-09-28 15:10:12 +00:00
< a href = "/Scratch/fr/blog/2010-07-31-New-style-after-holidays/" > Nouveau style après les vacances < span class = "nicer" > »< / span > < / a >
2010-08-23 12:26:48 +00:00
< / div >
< / div >
< div class = "flush" > < / div >
< / div >
< / div >
< div id = "bottom" >
< div >
< a rel = "license" href = "http://creativecommons.org/licenses/by-sa/3.0/deed.fr" > Droits de reproduction ©, Yann Esposito< / a >
< / div >
< div id = "lastmod" >
2010-09-02 14:42:39 +00:00
Écrit le : 19/06/2010
2010-09-02 09:51:46 +00:00
modifié le : 19/06/2010
2010-08-23 12:26:48 +00:00
< / div >
< div >
Site entièrement réalisé avec
< a href = "http://www.vim.org" > Vim< / a >
et
< a href = "http://nanoc.stoneship.org" > nanoc< / a >
< / div >
< div >
< a href = "/Scratch/fr/validation/" > Validation< / a >
< a href = "http://validator.w3.org/check?uri=referer" > [xhtml] < / a >
.
< a href = "http://jigsaw.w3.org/css-validator/check/referer?profile=css3" > [css] < / a >
.
< a href = "http://validator.w3.org/feed/check.cgi?url=http%3A//yannesposito.com/Scratch/fr/blog/feed/feed.xml" > [rss]< / a >
< / div >
< / div >
< div class = "clear" > < / div >
< / div >
< / body >
< / html >