I am encountering some difficulties with my model window. I would like it to open a modal that shows a larger version of the photo and description when the thumbnail is clicked. However, I have not been able to get it to work properly. The only time it popped up the information, it also duplicated my thumbnail image. Currently, instead of popping up, it just displays the information on the original 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>