yogsototh/her.esy.fun
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity
her.esy.fun/src/Scratch/fr/blog/2010-06-19-jQuery-popup-the-easy-way/index.html
Yann Esposito (Yogsototh) 059fabd7d0
many minor details to update
2022-10-26 11:38:50 +02:00

116 lines
9.2 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>YBlog - Comment faire des popups en jQuery rapidement</title>
<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="../../../../css/y.css" />
<link rel="stylesheet" type="text/css" href="/css/legacy.css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="apple-touch-icon" href="../../../../Scratch/img/about/FlatAvatar@2x.png" />
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<!-- IndieAuth -->
<link href="https://twitter.com/yogsototh" rel="me">
<link href="https://github.com/yogsototh" rel="me">
<link href="mailto:yann.esposito@gmail.com" rel="me">
<link rel="pgpkey" href="../../../../pubkey.txt">
</head>
<body lang="fr" class="article">
<div id="content">
<div id="header">
<div id="choix">
<span id="choixlang">
<a href="../../../../Scratch/en/blog/2010-06-19-jQuery-popup-the-easy-way/">Anglais</a>
</span>
<span class="tomenu"><a href="#navigation">↓ Menu ↓</a></span>
<span class="flush"></span>
</div>
</div>
<div id="titre">
<h1>Comment faire des popups en jQuery rapidement</h1>
</div>
<div class="flush"></div>
<div id="afterheader" class="article">
<div class="corps">
<p>Voici une façon simple et rapide pour faire des popups avec jQuery.</p>
<div class="sourceCode" id="cb1"><pre class="sourceCode javascript"><code class="sourceCode javascript"><a class="sourceLine" id="cb1-1" title="1"><span class="co">// --- code popup ---</span></a>
<a class="sourceLine" id="cb1-2" title="2"><span class="kw">function</span> <span class="at">openPopup</span>() <span class="op">{</span></a>
<a class="sourceLine" id="cb1-3" title="3"> <span class="at">$</span>(<span class="kw">this</span>).<span class="at">clone</span>(<span class="kw">false</span>).<span class="at">appendTo</span>(<span class="at">$</span>(<span class="st">&quot;#_code&quot;</span>))<span class="op">;</span></a>
<a class="sourceLine" id="cb1-4" title="4"> <span class="at">$</span>(<span class="st">&quot;#_code&quot;</span>).<span class="at">show</span>()<span class="op">;</span></a>
<a class="sourceLine" id="cb1-5" title="5"><span class="op">}</span></a>
<a class="sourceLine" id="cb1-6" title="6"></a>
<a class="sourceLine" id="cb1-7" title="7"><span class="kw">function</span> <span class="at">closePopup</span>() <span class="op">{</span></a>
<a class="sourceLine" id="cb1-8" title="8"> <span class="at">$</span>(<span class="st">&quot;#_code&quot;</span>).<span class="at">html</span>(<span class="st">&quot;&quot;</span>)<span class="op">;</span></a>
<a class="sourceLine" id="cb1-9" title="9"> <span class="at">$</span>(<span class="st">&quot;#_code&quot;</span>).<span class="at">hide</span>()<span class="op">;</span></a>
<a class="sourceLine" id="cb1-10" title="10"><span class="op">}</span></a>
<a class="sourceLine" id="cb1-11" title="11"></a>
<a class="sourceLine" id="cb1-12" title="12"><span class="kw">function</span> <span class="at">initCode</span>() <span class="op">{</span></a>
<a class="sourceLine" id="cb1-13" title="13"> <span class="at">$</span>(<span class="st">&quot;.code&quot;</span>).<span class="at">click</span>(openPopup)<span class="op">;</span></a>
<a class="sourceLine" id="cb1-14" title="14"> <span class="at">$</span>(<span class="st">&quot;.code&quot;</span>).<span class="at">css</span>(<span class="op">{</span><span class="dt">cursor</span><span class="op">:</span> <span class="st">&quot;pointer&quot;</span><span class="op">}</span>)<span class="op">;</span></a>
<a class="sourceLine" id="cb1-15" title="15"> <span class="at">$</span>(<span class="st">'body'</span>).<span class="at">append</span>(<span class="st">'&lt;div id=&quot;_code&quot;&gt;&lt;/div&gt;'</span>)<span class="op">;</span></a>
<a class="sourceLine" id="cb1-16" title="16"> <span class="at">$</span>(<span class="st">'#_code'</span>).<span class="at">css</span>( <span class="op">{</span> <span class="st">'text-align'</span><span class="op">:</span> <span class="st">&quot;justify&quot;</span><span class="op">,</span> <span class="dt">position</span><span class="op">:</span> <span class="st">&quot;fixed&quot;</span><span class="op">,</span> </a>
<a class="sourceLine" id="cb1-17" title="17"> <span class="dt">left</span><span class="op">:</span><span class="dv">0</span><span class="op">,</span> <span class="dt">top</span><span class="op">:</span><span class="dv">0</span><span class="op">,</span> <span class="dt">width</span><span class="op">:</span> <span class="st">&quot;100%&quot;</span><span class="op">,</span> <span class="dt">height</span><span class="op">:</span> <span class="st">&quot;100%&quot;</span><span class="op">,</span> </a>
<a class="sourceLine" id="cb1-18" title="18"> <span class="st">&quot;background-color&quot;</span><span class="op">:</span> <span class="st">&quot;rgba(0, 0, 0, 0.8)&quot;</span><span class="op">,</span> <span class="st">'z-index'</span><span class="op">:</span><span class="dv">2000</span><span class="op">,</span> <span class="st">'padding'</span><span class="op">:</span><span class="st">'3px'</span><span class="op">}</span> )<span class="op">;</span></a>
<a class="sourceLine" id="cb1-19" title="19"> <span class="at">$</span>(<span class="st">'#_code'</span>).<span class="at">hide</span>()<span class="op">;</span></a>
<a class="sourceLine" id="cb1-20" title="20"> <span class="at">$</span>(<span class="st">'#_code'</span>).<span class="at">click</span>(closePopup)<span class="op">;</span></a>
<a class="sourceLine" id="cb1-21" title="21"><span class="op">}</span></a>
<a class="sourceLine" id="cb1-22" title="22"><span class="co">// --- end of code popup section ---</span></a></code></pre></div>
<p>Que fait ce code ?</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="afterarticle">
<div id="social">
<a href="/rss.xml" target="_blank" rel="noopener noreferrer nofollow" class="social">RSS</a>
·
<a href="https://twitter.com/home?status=http%3A%2F%2Fyannesposito.com/Scratch/fr/blog/2010-06-19-jQuery-popup-the-easy-way/%20via%20@yogsototh" target="_blank" rel="noopener noreferrer nofollow" class="social">Tweet</a>
·
<a href="http://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fyannesposito.com/Scratch/fr/blog/2010-06-19-jQuery-popup-the-easy-way/" target="_blank" rel="noopener noreferrer nofollow" class="social">FB</a>
<br />
<a class="message" href="../../../../Scratch/fr/blog/Social-link-the-right-way/">Ces liens sociaux préservent votre vie privée</a>
</div>
<div id="navigation">
<a href="../../../../">Accueil</a>
<span class="sep">¦</span>
<a href="../../../../Scratch/fr/blog">Blog</a>
<span class="sep">¦</span>
<a href="../../../../Scratch/fr/softwares">Logiciels</a>
<span class="sep">¦</span>
<a href="../../../../Scratch/fr/about">Auteur</a>
</div>
<div id="totop"><a href="#header">↑ Top ↑</a></div>
<div id="bottom">
<div>
Published on 2010-06-19
</div>
<div>
<a href="https://twitter.com/yogsototh">Follow @yogsototh</a>
</div>
<div>
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_US">Yann Esposito©</a>
</div>
<div>
Done with
<a href="http://www.vim.org" target="_blank" rel="noopener noreferrer nofollow"><strike>Vim</strike></a>
<a href="http://spacemacs.org" target="_blank" rel="noopener noreferrer nofollow">spacemacs</a>
<span class="pala">&amp;</span>
<a href="http://nanoc.ws" target="_blank" rel="noopener noreferrer nofollow"><strike>nanoc</strike></a>
<a href="http://jaspervdj.be/hakyll" target="_blank" rel="noopener noreferrer nofollow">Hakyll</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Reference in a new issue View git blame Copy permalink