0
Avoir des problèmes avec ma fenêtre de modèle. Je veux qu'il ouvre le modal pour afficher une version plus grande de la photo et de la description lorsque vous cliquez sur la vignette. Je ne peux pas le faire fonctionner correctement la seule fois que j'ai été en mesure de l'obtenir pour afficher l'information, il a également doublé mon image miniature. maintenant, au lieu de surgir, il met juste l'information sur la page d'origine.Coincé mon modal ne s'ouvre pas à la place liste les informations sur ma page
.modalWindow {
position: fixed;
font-family: arial;
font-size:80%;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.2);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalHeader h2 { color: #189CDA; border-bottom: 2px groove #efefef; }
.modalWindow:target {
opacity:1;
pointer-events: auto;
}
.modalWindow > div {
width: 500px;
position: relative;
margin: 10% auto;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #fff;
}
.modalWindow .modalHeader { padding: 5px 20px 0px 20px; }
.modalWindow .modalContent { padding: 0px 20px 5px 20px; }
.modalWindow .modalFooter { padding: 8px 20px 8px 20px; }
.modalFooter {
background: #F1F1F1;
border-top: 1px solid #999;
-moz-box-shadow: inset 0px 13px 12px -14px #888;
-webkit-box-shadow: inset 0px 13px 12px -14px #888;
box-shadow: inset 0px 13px 12px -14px #888;
}
.modalFooter p {
color:#D4482D;
text-align:right;
margin:0;
padding: 5px;
}
.ok{
background: #606061;
color: #FFFFFF;
line-height: 25px;
text-align: center;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.ok {
position: absolute;
right: 5px;
top: 5px;
width: 22px;
height: 22px;
font-size: 10px;
}
.ok, {
width:80px;
float:right;
margin-left:20px;
}
.ok:hover { background: #189CDA; }
.ok { float:none; clear: both; }<a href="#openmodal"> <img src="http://www.papercraftsquare.com/wp-content/uploads/2015/02/RX-0-Unicorn-Gundam-V5-Papercraft.jpg" width="200px" height="200px" alt="Banshee"></a>
<figure>
<h4>RX-0 Unicorn 02
Banshee Norn</h4>
</figure>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="YZER6V8UMEATA">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
<div id="openModal" class="modalWindow">
<div>
<div class="modalHeader">
<h2>Gundam Unicorn</h2>
<a href="#ok" title="ok" class="ok">X</a>
</div>
<div class="modalContent">
<img src="http://www.papercraftsquare.com/wp-content/uploads/2015/02/RX-0-Unicorn-Gundam-V5-Papercraft.jpg" width="400px" height="400px" align:left;>
<p>Line1</p>
<p>Line 2</p>
</div>
<div class="modalFooter">
<a href="#ok" title="ok" class="ok">OK</a>
</div>
</a>
Tout d'abord ** # ** ID doit être unique, vous aurez besoin de changer quoi que ce soit ça avant. De plus, la deuxième règle avant la dernière règle a 'ok, {...}', elle sera donc ignorée. Enfin, SIMPLIFIER, simplifiez les choses en supprimant le code redondant et en combinant les règles. Et ajoutez '* {outline: 1px dashed}' à votre code afin que vous puissiez voir ce qui se passe. –