1.刚才按的图片
2.弹出后内容的效果图
3.弹出后内容的效果图
<code><div class="section-title center section-title-b"> <h2>{$CATEGORYS[9][catname]}</h2> <!-- 按钮触发模态框 --> <!--<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> More </button>--> <!-- 模态框(Modal) --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" 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"> × </button> <h4 class="modal-title" id="myModalLabel"> {$CATEGORYS[9][catname]} </h4> </div> <div class="modal-body"> <div class="main-n"> <ul class="showMoreNChildren" pagesize="1"> <li> {pc:content action="lists" catid="9" order="id DESC" num="4"} {loop $data $key $val} <div class="main-nn"> <a href="#" class="main-h main-hm"><h3>{$val['title']}</h3></a> <!--二次弹出效果--> <!--<div class="main-m"> <h3>{$val['title']}</h3> <a href=""> <img src="{$val['thumb']}" alt=""> </a> <p>{$val['title']}</p> <a class="main-close">×</a> </div>--> <!-- <div class="main-m-bg"></div>--> <a href="#" class="main-hm-i"><img src="%7B%24val%5B'thumb'%5D%7D" alt=""></a> <p class="main-hm-p">{$val['description']}</p> </div> {/loop} {/pc} </li> </ul> <!-- <script type="text/javascript"> //调用显示更多内容 $.showMore(".showMoreNChildren"); </script> --> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"> 关闭 </button> </div> </div> <!-- /.modal-content --> </div> </div> <p>{$CATEGORYS[9][description]}</p> </div></code>
2.刚才按的图片
<code> <div id="row"> {pc:content action="lists" catid="9" order="id DESC" num="4"} {loop $data $key $val} <div class="col-md-3 col-sm-6 team animated hiding" data-animation="fadeInUp" data-delay="300"> <div class="thumbnail"> <div class="profile-photo"><a class="btn btn-lg" data-toggle="modal" data-target="#myModal"><img src="%7B%24val%5B'thumb'%5D%7D" alt="..." class="img-circle team-img"></a></div> <div class="caption"> <h3>{$val['title']}</h3> </div> </div> </div> {/loop} {/pc} </div></code>
大师,如何把每个图片弹出对应的内容?怎么做?对了,这是phpcms语法。
1.刚才按的图片
2.弹出后内容的效果图
3.弹出后内容的效果图
<code><div class="section-title center section-title-b"> <h2>{$CATEGORYS[9][catname]}</h2> <!-- 按钮触发模态框 --> <!--<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> More </button>--> <!-- 模态框(Modal) --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" 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"> × </button> <h4 class="modal-title" id="myModalLabel"> {$CATEGORYS[9][catname]} </h4> </div> <div class="modal-body"> <div class="main-n"> <ul class="showMoreNChildren" pagesize="1"> <li> {pc:content action="lists" catid="9" order="id DESC" num="4"} {loop $data $key $val} <div class="main-nn"> <a href="#" class="main-h main-hm"><h3>{$val['title']}</h3></a> <!--二次弹出效果--> <!--<div class="main-m"> <h3>{$val['title']}</h3> <a href=""> <img src="{$val['thumb']}" alt=""> </a> <p>{$val['title']}</p> <a class="main-close">×</a> </div>--> <!-- <div class="main-m-bg"></div>--> <a href="#" class="main-hm-i"><img src="%7B%24val%5B'thumb'%5D%7D" alt=""></a> <p class="main-hm-p">{$val['description']}</p> </div> {/loop} {/pc} </li> </ul> <!-- <script type="text/javascript"> //调用显示更多内容 $.showMore(".showMoreNChildren"); </script> --> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"> 关闭 </button> </div> </div> <!-- /.modal-content --> </div> </div> <p>{$CATEGORYS[9][description]}</p> </div></code>
2.刚才按的图片
<code> <div id="row"> {pc:content action="lists" catid="9" order="id DESC" num="4"} {loop $data $key $val} <div class="col-md-3 col-sm-6 team animated hiding" data-animation="fadeInUp" data-delay="300"> <div class="thumbnail"> <div class="profile-photo"><a class="btn btn-lg" data-toggle="modal" data-target="#myModal"><img src="%7B%24val%5B'thumb'%5D%7D" alt="..." class="img-circle team-img"></a></div> <div class="caption"> <h3>{$val['title']}</h3> </div> </div> </div> {/loop} {/pc} </div></code>
大师,如何把每个图片弹出对应的内容?怎么做?对了,这是phpcms语法。
第一种方法
点击图片的时候用ajax去获取里面相关内容
第二种方法
可以把这些弹窗内容先写好然后点击图片找对应的弹窗显示出来
对应关系少可以用第二种,弹窗太多就用第一种吧