我的模型窗口出现问题。我希望它在单击缩略图时打开模式以显示更大版本的照片和说明。我不能让它工作正常我唯一能够让它弹出信息它也加倍我的缩略图。现在它不是弹出它只是将信息放在原始页面上。
.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>
答案 0 :(得分：0)
.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; }<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<a href="#openmodal" data-toggle="modal" data-target="#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>
</a>
<div id="openModal" class="modalWindow modal fade">
<div>
<div class="modalHeader">
<h2>Gundam Unicorn</h2>
<a href="#ok" title="ok" class="ok" data-dismiss="modalWindow">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>
</div>
</div>