Créer une fenêtre modale avec CSS 3.Une erreur dans cette actualité ? Signalez-nous-la !
).
1 |
0 |
|
0 |
0 |
|
0 |
0 |
| Code html : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | <!doctype html> <html> <head> <meta charset="utf-8" /> <title>Modalbox CSS</title> <style> h1{ text-align: center; } #modalCheck{ display: none; } .modalLayer{ display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.5); } #modalCheck:checked + .modalLayer, #modalContent:target{ display: block; } .popup_block{ background: #fff; padding: 20px; border: 20px solid #ddd; position: relative; margin: 10% auto; width: 40%; box-shadow: 0px 0px 20px #000; border-radius: 10px; } img.btn_close { float: right; margin: -55px -55px 0 0; cursor: pointer; } .button{ cursor: pointer; color: blue; text-decoration: underline; } </style> </head> <body> <h1>Une Modalbox CSS</h1> <h2>Méthode <kbd>:target 1</kbd></h2> <p>Cliquer sur le lien ci-dessous pour voir apparaitre la fenêtre modale #1</p> <div> <a href="#modalContent">Voir la fenêtre modale</a> <div class="modalLayer" id="modalContent"> <div class="popup_block"> <a href="#noWhere"><img alt="Fermer" title="Fermer la fenêtre" class="btn_close" src="03-ressources/close_pop.png"></a> <img style="float: right; margin: 0 0 0 20px;" alt="Lil bomb dude" src="./bomber.gif"> <h2>Popup #1</h2> <p>Fenêtre modale 1. </p> <p>avec un target.</p> </div> </div> </div> <h2>Méthode <kbd>:target 2</kbd></h2> <p>Cliquer sur le lien ci-dessous pour voir apparaitre la fenêtre modale #1</p> <div> <a href="#modalContent">Voir la fenêtre modale</a> <div class="modalLayer" id="modalContent"> <div class="popup_block"> <a href="#noWhere"><img alt="Fermer" title="Fermer la fenêtre" class="btn_close" src="03-ressources/close_pop.png"></a> <img style="float: right; margin: 0 0 0 20px;" alt="Lil bomb dude" src="./bomber.gif"> <h2>Popup #1</h2> <p>Fenêtre modale 2. </p> <p>avec un target.</p> </div> </div> </div> <h2>Méthode <kbd>:checked 1</kbd></h2> <p>Cliquer sur le lien ci-dessous pour voir apparaitre la fenêtre modale #2</p> <div> <label class="button" for="modalCheck">Voir la fenêtre modale</label> <input type="checkbox" id="modalCheck" /> <div class="modalLayer"> <div class="popup_block"> <label for="modalCheck"><img alt="Fermer" title="Fermer la fenêtre" class="btn_close" src="03-ressources/close_pop.png"></label> <img style="float: right; margin: 0 0 0 20px;" alt="Lil bomb dude" src="./bomber.gif"> <h2>Popup #2</h2> <p>Fenêtre modale 1. </p> <p>avec un bouton.</p> </div> </div> </div> <h2>Méthode <kbd>:checked 2</kbd></h2> <p>Cliquer sur le lien ci-dessous pour voir apparaitre la fenêtre modale #2</p> <div> <label class="button" for="modalCheck">Voir la fenêtre modale</label> <input type="checkbox" id="modalCheck" /> <div class="modalLayer"> <div class="popup_block"> <label for="modalCheck"><img alt="Fermer" title="Fermer la fenêtre" class="btn_close" src="03-ressources/close_pop.png"></label> <img style="float: right; margin: 0 0 0 20px;" alt="Lil bomb dude" src="./bomber.gif"> <h2>Popup #2</h2> <p>Fenêtre modale 2. </p> <p>avec un bouton.</p> </div> </div> </div> </body> </html> |
|
0 |
0 |
|
0 |
0 |
|
0 |
0 |
|
0 |
0 |
