J'ai trouvé cet article très bien donc je l'ai mis en application.
mais lors des essais, petit problème:
dans mon fichier j'ai 3 fenêtres popup en javascript
j'ai donc remplacé le code en mettant en place les fenêtres modales.
Mais quand j'ai cliqué sur le 1er lien -> résultat ok
quand j'ai cliqué sur le 2éme -> affichage du 1er lien
idem pour le 3éme lien.
j'ai pris l'exemple de l'article, j'ai doublés les routines avec target et button et j'ai changé le texte entre les balises <p></p> pour identifier les positions "target 1" "target 2" idem avec "bouton 1" "bouton2"
quand j'ai cliqué sur le 1er lien target, il m"affiche bien target 1 mais quand je clique sur le 2éme lien target, il m'affiche encore target 1 alors qu'il devrait m'afficher target 2.
idem avec les commandes bouton.
conclusion, il semblerait que l'on ne peut utiliser cette routine qu'une fois par fichier.
une fois le lien target et une fois le lien button
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 |