javascript - 鼠标按每个图片的时候对应弹出内容
- WBOY原創
- 2016-07-06 13:53:401343瀏覽
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去获取里面相关内容
第二种方法
可以把这些弹窗内容先写好然后点击图片找对应的弹窗显示出来
对应关系少可以用第二种，弹窗太多就用第一种吧
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn