html - 卡住我的模式不会打开而是在我的页面上列出信息

Question

我的模型窗口有问题。我希望它在单击缩略图时打开模式以显示更大版本的照片和描述。我无法让它正常工作，这是我唯一一次能够让它弹出信息，它还使我的缩略图翻了一番。现在它不是弹出，而是将信息放在原始页面上。

.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>

Answer 1

.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>