css - 使用 Struts2 和 bootstrap 以模态方式打开图像

Question

我想尝试以模态方式点击打开我网站上的所有图像。我正在使用 Struts2、Bootstrap。请告诉我正确的方法，一些例子？

这是我的代码:

 <div class="row">
    <s:iterator value="galleryList" var="galleryTemp">
       <div class="col-xs-5 col-md-3">
         <div class="thumbnail">
          <a href=""><img src='userfiles/images/<s:property value="%{#galleryTemp.imageName}" />'  class="thumbnail"  data-toggle="modal" data-target="#myModal<s:property value="%{#galleryTemp.id}" />"  alt="body img" />
            </a>
        <div class="modal fade" id="myModal<s:property value="%{#galleryTemp.id}" />" tabindex="-1" role="image" aria-labelledby="myModalLabel" aria-hidden="true">

         <img src='userfiles/images/<s:property value="%{#galleryTemp.imageName}" />' class="thumbnail" data-toggle="modal" data-target="#myModal" alt="body img" />
           </div>
     <div class="caption">
<center><h4><s:property value="%{#galleryTemp.description}" escapeHtml="false"/></h4>                   </center>
    </div>
   </div>    
 </div> 
</s:iterator>
</div>

Answer 1

试试这段代码

 <div class="row">
    <s:iterator value="galleryList" var="galleryTemp">
       <div class="col-xs-5 col-md-3">
         <div class="thumbnail">
          <a href="#"><img src='userfiles/images/<s:property value="%{#galleryTemp.imageName}" />'  class="thumbnail"  data-toggle="modal" data-target="#myModal<s:property value="%{#galleryTemp.id}" />"  alt="body img" /></a>
         </div>
         <div class="modal fade" id="myModal<s:property value="%{#galleryTemp.id}" />" tabindex="-1" role="image" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
           <div class="modal-content">
            <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             <div class="caption">
             <center><h4><s:property value="%{#galleryTemp.description}" escapeHtml="false"/></h4>                   </center>
             </div>
            </div>
            <div class="modal-body">
             <img src='userfiles/images/<s:property value="%{#galleryTemp.imageName}" />' class="thumbnail" data-toggle="modal" data-target="#myModal" alt="body img" />
            </div>
           </div>    
          </div> 
       </div>
    </s:iterator>
</div>