Home >Backend Development >PHP Tutorial >javascript - When the mouse clicks on each picture, the corresponding pop-up content will appear
javascript - When the mouse clicks on each picture, the corresponding pop-up content will appear
- WBOYOriginal
- 2016-07-06 13:53:401382browse
1. The picture you just clicked on
2. Rendering of the content after popping up
3. Rendering of the content after popping up
<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. The picture you just clicked on
<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="javascript - When the mouse clicks on each picture, the corresponding pop-up content will appear" class="img-circle team-img"></a></div>
<div class="caption">
<h3>{$val['title']}</h3>
</div>
</div>
</div>
{/loop}
{/pc}
</div></code>
Master, how to pop up the corresponding content of each picture? How to do it? By the way, this is phpcms syntax.
Reply content:
1. The picture you just clicked on
2. Rendering of the content after popping up
3. Rendering of the content after popping up
<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. The picture you just clicked on
<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="javascript - When the mouse clicks on each picture, the corresponding pop-up content will appear" class="img-circle team-img"></a></div>
<div class="caption">
<h3>{$val['title']}</h3>
</div>
</div>
</div>
{/loop}
{/pc}
</div></code>
Master, how to pop up the corresponding content of each picture? How to do it? By the way, this is phpcms syntax.
The first method
When you click on the picture, use ajax to get the relevant content inside
The second method
You can write the content of these pop-up windows first and then click on the picture to find the corresponding pop-up window to display
If there are few correspondences, you can use the second one. If there are too many pop-ups, use the first one
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：utf8_general_ci is not case sensitive, so you have to use utf8_general_cs?Next article：utf8_general_ci is not case sensitive, so you have to use utf8_general_cs?