Connexion
S'inscrire
Actualités
Quoi de neuf
Activités générales
Auteurs
Forums
Nouveaux messages
Rechercher un forum
Quoi de neuf
Nouveaux messages
Nouveaux messages de profil
Activités générales
Membres
Membres inscrits
Visiteurs actuels
Nouveaux messages de profil
Rechercher dans les messages des profils
Teams
Créé ton équipe
Quoi de neuf ?
Nouveaux messages
Rechercher un forum
Menu
Connexion
S'inscrire
Install the app
Install
Forums
Forums généraux
Informatique
Développement
HTML/CSS/JS - Créer une modal sans bootstrap
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
Vous utilisez un navigateur non à jour ou ancien. Il ne peut pas afficher ce site ou d'autres sites correctement.
Vous devez le mettre à jour ou utiliser un
navigateur alternatif
.
Répondre à la discussion
Message
<blockquote data-quote="Paul GTP" data-source="post: 7137903" data-attributes="member: 315249"><p style="text-align: center"><span style="font-family: 'Abel'"><span style="font-size: 15px"><img src="http://image.prntscr.com/image/4e0f04b872cb484fb31ead366dd8a507.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'Abel'"><span style="font-size: 15px">Salut à tous ! <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite171" alt=":D" title="Awesome face :D" loading="lazy" data-shortname=":D" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Abel'"><span style="font-size: 15px">Aujourd'hui on se retrouve pour un petit partage <img src="/data/assets/smilies/joueur.gif" class="smilie" loading="lazy" alt=":p" title="Joueur :p" data-shortname=":p" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Abel'"><span style="font-size: 15px">Rien de bien compliqué ici ! J'ai simplement repris un petit code de <strong><span style="color: #ff8000">w3schools </span></strong>et l'ai rapidement modifié <img src="/data/assets/smilies/joueur.gif" class="smilie" loading="lazy" alt=":p" title="Joueur :p" data-shortname=":p" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Abel'"><span style="font-size: 15px">Pour commencer, voici le code <strong><span style="color: #ff8000">HTML</span></strong> et le code <strong><span style="color: #ff8000">CSS</span></strong> correspondant, ils sont simples, sauf pour la partie animation.</span></span></p> <p style="text-align: center"><span style="font-family: 'Abel'"><span style="font-size: 15px">Le <strong><span style="color: #ff8000">CSS</span></strong> demande des connaissances un peu plus poussées mais c'est pour l'animation, le code marche très bien sans <img src="/data/assets/smilies/joueur.gif" class="smilie" loading="lazy" alt=":p" title="Joueur :p" data-shortname=":p" /></span></span></p> <p style="text-align: center"></p> <p style="text-align: center">[HTML]<!DOCTYPE html></p> <p style="text-align: center"><html lang="fr"></p> <p style="text-align: center"> <head></p> <p style="text-align: center"> <title>Modal sans bootstrap</title></p> <p style="text-align: center"> <script src="modal.js"></script></p> <p style="text-align: center"> <link rel="stylesheet" href="modal.css" /></p> <p style="text-align: center"> </head></p> <p style="text-align: center"></p> <p style="text-align: center"> <body></p> <p style="text-align: center"> <div id="modal"></p> <p style="text-align: center"> <div class="modalContent"></p> <p style="text-align: center"> <div class="modalHeader"></p> <p style="text-align: center"> <span class="modalClose" onclick="closeModal()">&times;</span></p> <p style="text-align: center"> <h2>Ce site est en construction</h2></p> <p style="text-align: center"> </div></p> <p style="text-align: center"> <div class="modalBody"></p> <p style="text-align: center"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultricies augue sollicitudin, pellentesque lectus quis, porttitor mi. Sed sollicitudin est ac neque feugiat, faucibus tempor ex posuere. Maecenas finibus vel libero nec elementum. Donec fringilla dapibus elementum. Praesent dui nibh, semper ut ultrices eget, vehicula et mi. Fusce a ligula rutrum, tincidunt dui vitae, pulvinar odio. Fusce ac lorem non velit efficitur congue at eget risus. Nam consectetur mi non pharetra dignissim. Curabitur porta, ligula a porta fermentum, dolor urna ullamcorper elit, nec bibendum erat ligula nec nisl. Quisque non accumsan elit, eget elementum enim. Mauris dictum hendrerit odio, vel tincidunt turpis lobortis in. Praesent felis risus, gravida ornare faucibus eu, venenatis eget ex. Praesent sed viverra purus, et finibus elit.</p></p> <p style="text-align: center"> </div></p> <p style="text-align: center"> </div></p> <p style="text-align: center"> </div></p> <p style="text-align: center"> </body></p> <p style="text-align: center"></html>[/HTML]</p> <p style="text-align: center"></p> <p style="text-align: center">[CODE]body {</p> <p style="text-align: center"> font-family: Open Sans;</p> <p style="text-align: center">}</p> <p style="text-align: center"></p> <p style="text-align: center">@-webkit-keyframes animatetop {</p> <p style="text-align: center"> from {</p> <p style="text-align: center"> top: -300px;</p> <p style="text-align: center"> opacity: 0;</p> <p style="text-align: center"> }</p> <p style="text-align: center"> to {</p> <p style="text-align: center"> top: 0;</p> <p style="text-align: center"> opacity: 1;</p> <p style="text-align: center"> }</p> <p style="text-align: center">}</p> <p style="text-align: center"></p> <p style="text-align: center">@keyframes animatetop {</p> <p style="text-align: center"> from {</p> <p style="text-align: center"> top: -300px;</p> <p style="text-align: center"> opacity: 0;</p> <p style="text-align: center"> }</p> <p style="text-align: center"> to {</p> <p style="text-align: center"> top: 0;</p> <p style="text-align: center"> opacity: 1;</p> <p style="text-align: center"> }</p> <p style="text-align: center">}</p> <p style="text-align: center"></p> <p style="text-align: center">#modal {</p> <p style="text-align: center"> display: block;</p> <p style="text-align: center"> position: fixed;</p> <p style="text-align: center"> z-index: 1;</p> <p style="text-align: center"> padding-top: 100px;</p> <p style="text-align: center"> left: 0;</p> <p style="text-align: center"> top: 0;</p> <p style="text-align: center"> width: 100%;</p> <p style="text-align: center"> height: 100%;</p> <p style="text-align: center"> overflow: auto;</p> <p style="text-align: center"> background-color: rgb(0,0,0);</p> <p style="text-align: center"> background-color: rgba(0,0,0,0.4);</p> <p style="text-align: center">}</p> <p style="text-align: center"></p> <p style="text-align: center">.modalContent {</p> <p style="text-align: center"> position: relative;</p> <p style="text-align: center"> background-color: #fefefe;</p> <p style="text-align: center"> margin: auto;</p> <p style="text-align: center"> padding: 0;</p> <p style="text-align: center"> border: 1px solid #888;</p> <p style="text-align: center"> width: 80%;</p> <p style="text-align: center"> box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);</p> <p style="text-align: center"> -webkit-animation-name: animatetop;</p> <p style="text-align: center"> -webkit-animation-duration: 0.4s;</p> <p style="text-align: center"> animation-name: animatetop;</p> <p style="text-align: center"> animation-duration: 0.4s;</p> <p style="text-align: center">}</p> <p style="text-align: center"></p> <p style="text-align: center">.modalClose {</p> <p style="text-align: center"> color: white;</p> <p style="text-align: center"> float: right;</p> <p style="text-align: center"> font-size: 28px;</p> <p style="text-align: center"> font-weight: bold;</p> <p style="text-align: center">}</p> <p style="text-align: center"></p> <p style="text-align: center">.modalClose:hover, .modalClose:focus {</p> <p style="text-align: center"> color: #000;</p> <p style="text-align: center"> text-decoration: none;</p> <p style="text-align: center"> cursor: pointer;</p> <p style="text-align: center">}</p> <p style="text-align: center"></p> <p style="text-align: center">.modalHeader {</p> <p style="text-align: center"> padding: 2px 16px;</p> <p style="text-align: center"> background-color: #b02d33;</p> <p style="text-align: center"> color: white;</p> <p style="text-align: center">}</p> <p style="text-align: center"></p> <p style="text-align: center">.modalBody {</p> <p style="text-align: center"> padding: 2px 16px;</p> <p style="text-align: center">}[/CODE]</p> <p style="text-align: center"></p> <p style="text-align: center"><img src="http://image.prntscr.com/image/4fc4e31d4b3445ac98bd1006d069fd97.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'"><span style="font-size: 26px"><span style="color: #ff8000">[FA]fa-book[/FA] Partie 1: Modal au lancement de la page</span></span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><img src="https://image.prntscr.com/image/007946a90bb44f8a9ec196433654af1c.gif" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'Abel'"><span style="font-size: 15px">Le code <strong><span style="color: #ff8000">JavaScript</span></strong> comporte <strong><span style="color: #ff8000">2 fonctions</span></strong> ; ces deux fonctions permettent de fermer la modal.</span></span></p> <p style="text-align: center"><span style="font-family: 'Abel'"><span style="font-size: 15px">Une la ferme lorsque l'on clique sur la croix, l'autre quand l'on clique quelque part sur la page ailleurs que sur la modal.</span></span></p> <p style="text-align: center"></p> <p style="text-align: center">[CODE]function closeModal() {</p> <p style="text-align: center"> var modal = document.getElementById('modal');</p> <p style="text-align: center"> modal.style.display = "none";</p> <p style="text-align: center">}</p> <p style="text-align: center"></p> <p style="text-align: center">window.onclick = function(event) {</p> <p style="text-align: center"> if (event.target == modal) {</p> <p style="text-align: center"> modal.style.display = "none";</p> <p style="text-align: center"> }</p> <p style="text-align: center">}[/CODE]</p> <p style="text-align: center"></p> <p style="text-align: center"><img src="http://image.prntscr.com/image/4fc4e31d4b3445ac98bd1006d069fd97.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'"><span style="font-size: 26px"><span style="color: #ff8000">[FA]fa-mouse-pointer[/FA] Partie 2: Modal au clique</span></span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><img src="https://image.prntscr.com/image/d61ce0418d5443599e0c57259a8ed325.gif" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'Abel'"><span style="font-size: 15px">Dans votre code <strong><span style="color: #ff8000">CSS</span></strong>, vous devez modifier la modal pour la faire disparaître: on passe le display de <strong><span style="color: #ff8000">block</span></strong> à <strong><span style="color: #ff8000">none</span></strong></span></span></p> <p style="text-align: center"></p> <p style="text-align: center">[CODE]#modal {</p> <p style="text-align: center"> display: none;</p> <p style="text-align: center"> position: fixed;</p> <p style="text-align: center"> z-index: 1;</p> <p style="text-align: center"> padding-top: 100px;</p> <p style="text-align: center"> left: 0;</p> <p style="text-align: center"> top: 0;</p> <p style="text-align: center"> width: 100%;</p> <p style="text-align: center"> height: 100%;</p> <p style="text-align: center"> overflow: auto;</p> <p style="text-align: center"> background-color: rgb(0,0,0);</p> <p style="text-align: center"> background-color: rgba(0,0,0,0.4);</p> <p style="text-align: center">}[/CODE]</p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'Abel'"><span style="font-size: 15px">Ensuite, on rajoute une fonction dans le code javascript pour <strong><span style="color: #ff8000">ouvrir</span></strong> la modal</span></span></p> <p style="text-align: center"></p> <p style="text-align: center">[CODE]function showModal() {</p> <p style="text-align: center"> var modal = document.getElementById('modal');</p> <p style="text-align: center"> modal.style.display = "block";</p> <p style="text-align: center">}[/CODE]</p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'Abel'"><span style="font-size: 15px">Et pour finir, on rajoute <strong><span style="color: #ff8000">un bouton</span></strong> en <strong><span style="color: #ff8000">HTML</span></strong> qui permet de l'ouvrir.</span></span></p> <p style="text-align: center"></p> <p style="text-align: center">[HTML]</p> <p style="text-align: center"><button onclick="showModal()">Afficher la modal</button></p> <p style="text-align: center">[/HTML]</p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'Abel'"><span style="font-size: 15px">Il est intéréssant de souligner que vous pouvez placer le bouton et la modal <strong><span style="color: #ff8000">où vous voulez</span></strong> dans votre code <img src="/data/assets/smilies/joueur.gif" class="smilie" loading="lazy" alt=":p" title="Joueur :p" data-shortname=":p" /></span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><img src="http://image.prntscr.com/image/4fc4e31d4b3445ac98bd1006d069fd97.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'Abel'"><span style="font-size: 15px">Voilà <img src="/data/assets/smilies/joueur.gif" class="smilie" loading="lazy" alt=":p" title="Joueur :p" data-shortname=":p" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Abel'"><span style="font-size: 15px">C'était un tutoriel assez court mais je n'ai plus trop le temps de rédiger ces temps-ci <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite353" alt="D:" title="Sad D:" loading="lazy" data-shortname="D:" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Abel'"><span style="font-size: 15px">Vous pouvez aussi combiner les deux codes (afficher la modal en arrivant + l'afficher au clique) <img src="/data/assets/smilies/mmh.gif" class="smilie" loading="lazy" alt=":mmh:" title="Mmh :mmh:" data-shortname=":mmh:" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Abel'"><span style="font-size: 15px">Très occupé depuis des mois (et encore plus ce mois-ci avec le bac) et la baisse d'activité générale, je fais comme je peux <img src="/data/assets/smilies/joueur.gif" class="smilie" loading="lazy" alt=":p" title="Joueur :p" data-shortname=":p" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Abel'"><span style="font-size: 15px"><strong>Source:</strong> <a href="https://www.w3schools.com/howto/howto_css_modals.asp" target="_blank"><span style="color: #ff8000">https://www.w3schools.com/howto/howto_css_modals.asp</span></a></span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'Abel'"><span style="font-size: 15px">Si vous avez des questions sur le code, des remarques, ou des problèmes, je suis là</span></span></p> <p style="text-align: center"><span style="font-family: 'Abel'"><span style="font-size: 15px">Enjoy <img src="/images/smiley-pack/neo.gif" class="smilie" loading="lazy" alt=":neo:" title="Neo :neo:" data-shortname=":neo:" /></span></span></p></blockquote><p></p>
[QUOTE="Paul GTP, post: 7137903, member: 315249"] [CENTER][FONT=Abel][SIZE=4][IMG]http://image.prntscr.com/image/4e0f04b872cb484fb31ead366dd8a507.png[/IMG][/SIZE][/FONT] [FONT=Abel][SIZE=4]Salut à tous ! :D Aujourd'hui on se retrouve pour un petit partage :p Rien de bien compliqué ici ! J'ai simplement repris un petit code de [B][COLOR='#ff8000']w3schools [/COLOR][/B]et l'ai rapidement modifié :p Pour commencer, voici le code [B][COLOR='#ff8000']HTML[/COLOR][/B] et le code [B][COLOR='#ff8000']CSS[/COLOR][/B] correspondant, ils sont simples, sauf pour la partie animation. Le [B][COLOR='#ff8000']CSS[/COLOR][/B] demande des connaissances un peu plus poussées mais c'est pour l'animation, le code marche très bien sans :p[/SIZE][/FONT] [HTML]<!DOCTYPE html> <html lang="fr"> <head> <title>Modal sans bootstrap</title> <script src="modal.js"></script> <link rel="stylesheet" href="modal.css" /> </head> <body> <div id="modal"> <div class="modalContent"> <div class="modalHeader"> <span class="modalClose" onclick="closeModal()">×</span> <h2>Ce site est en construction</h2> </div> <div class="modalBody"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultricies augue sollicitudin, pellentesque lectus quis, porttitor mi. Sed sollicitudin est ac neque feugiat, faucibus tempor ex posuere. Maecenas finibus vel libero nec elementum. Donec fringilla dapibus elementum. Praesent dui nibh, semper ut ultrices eget, vehicula et mi. Fusce a ligula rutrum, tincidunt dui vitae, pulvinar odio. Fusce ac lorem non velit efficitur congue at eget risus. Nam consectetur mi non pharetra dignissim. Curabitur porta, ligula a porta fermentum, dolor urna ullamcorper elit, nec bibendum erat ligula nec nisl. Quisque non accumsan elit, eget elementum enim. Mauris dictum hendrerit odio, vel tincidunt turpis lobortis in. Praesent felis risus, gravida ornare faucibus eu, venenatis eget ex. Praesent sed viverra purus, et finibus elit.</p> </div> </div> </div> </body> </html>[/HTML] [CODE]body { font-family: Open Sans; } @-webkit-keyframes animatetop { from { top: -300px; opacity: 0; } to { top: 0; opacity: 1; } } @keyframes animatetop { from { top: -300px; opacity: 0; } to { top: 0; opacity: 1; } } #modal { display: block; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); } .modalContent { position: relative; background-color: #fefefe; margin: auto; padding: 0; border: 1px solid #888; width: 80%; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s; } .modalClose { color: white; float: right; font-size: 28px; font-weight: bold; } .modalClose:hover, .modalClose:focus { color: #000; text-decoration: none; cursor: pointer; } .modalHeader { padding: 2px 16px; background-color: #b02d33; color: white; } .modalBody { padding: 2px 16px; }[/CODE] [IMG]http://image.prntscr.com/image/4fc4e31d4b3445ac98bd1006d069fd97.png[/IMG] [FONT=MyriadPro][SIZE=7][COLOR='#ff8000'][FA]fa-book[/FA] Partie 1: Modal au lancement de la page[/COLOR][/SIZE][/FONT] [IMG]https://image.prntscr.com/image/007946a90bb44f8a9ec196433654af1c.gif[/IMG] [FONT=Abel][SIZE=4]Le code [B][COLOR='#ff8000']JavaScript[/COLOR][/B] comporte [B][COLOR='#ff8000']2 fonctions[/COLOR][/B] ; ces deux fonctions permettent de fermer la modal. Une la ferme lorsque l'on clique sur la croix, l'autre quand l'on clique quelque part sur la page ailleurs que sur la modal.[/SIZE][/FONT] [CODE]function closeModal() { var modal = document.getElementById('modal'); modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }[/CODE] [IMG]http://image.prntscr.com/image/4fc4e31d4b3445ac98bd1006d069fd97.png[/IMG] [FONT=MyriadPro][SIZE=7][COLOR='#ff8000'][FA]fa-mouse-pointer[/FA] Partie 2: Modal au clique[/COLOR][/SIZE][/FONT] [IMG]https://image.prntscr.com/image/d61ce0418d5443599e0c57259a8ed325.gif[/IMG] [FONT=Abel][SIZE=4]Dans votre code [B][COLOR='#ff8000']CSS[/COLOR][/B], vous devez modifier la modal pour la faire disparaître: on passe le display de [B][COLOR='#ff8000']block[/COLOR][/B] à [B][COLOR='#ff8000']none[/COLOR][/B][/SIZE][/FONT] [CODE]#modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); }[/CODE] [FONT=Abel][SIZE=4]Ensuite, on rajoute une fonction dans le code javascript pour [B][COLOR='#ff8000']ouvrir[/COLOR][/B] la modal[/SIZE][/FONT] [CODE]function showModal() { var modal = document.getElementById('modal'); modal.style.display = "block"; }[/CODE] [FONT=Abel][SIZE=4]Et pour finir, on rajoute [B][COLOR='#ff8000']un bouton[/COLOR][/B] en [B][COLOR='#ff8000']HTML[/COLOR][/B] qui permet de l'ouvrir.[/SIZE][/FONT] [HTML] <button onclick="showModal()">Afficher la modal</button> [/HTML] [FONT=Abel][SIZE=4]Il est intéréssant de souligner que vous pouvez placer le bouton et la modal [B][COLOR='#ff8000']où vous voulez[/COLOR][/B] dans votre code :p[/SIZE][/FONT] [IMG]http://image.prntscr.com/image/4fc4e31d4b3445ac98bd1006d069fd97.png[/IMG] [FONT=Abel][SIZE=4]Voilà :p C'était un tutoriel assez court mais je n'ai plus trop le temps de rédiger ces temps-ci D: Vous pouvez aussi combiner les deux codes (afficher la modal en arrivant + l'afficher au clique) :mmh: Très occupé depuis des mois (et encore plus ce mois-ci avec le bac) et la baisse d'activité générale, je fais comme je peux :p [B]Source:[/B] [URL='https://www.w3schools.com/howto/howto_css_modals.asp'][COLOR='#ff8000']https://www.w3schools.com/howto/howto_css_modals.asp[/COLOR][/URL][/SIZE][/FONT] [FONT=Abel][SIZE=4]Si vous avez des questions sur le code, des remarques, ou des problèmes, je suis là Enjoy :neo:[/SIZE][/FONT][/CENTER] [/QUOTE]
Insérer les citations…
Vérification
Publier la réponse
Forums
Forums généraux
Informatique
Développement
HTML/CSS/JS - Créer une modal sans bootstrap
Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
Acceptez
En savoir plus.…
Haut