Community Learn Tools Library Leisure
search
English
Home > Backend Development > PHP Tutorial > body text

javascript - When the mouse clicks on each picture, the corresponding pop-up content will appear

WBOY
Release： 2016-07-06 13:53:40
Original
1341 people have browsed it

1. The picture you just clicked on javascript - When the mouse clicks on each picture, the corresponding pop-up content will appear

2. Rendering of the content after popping upjavascript - When the mouse clicks on each picture, the corresponding pop-up content will appear

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">&#215;</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>
Copy after login
Copy after login

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>
Copy after login
Copy after login

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 javascript - When the mouse clicks on each picture, the corresponding pop-up content will appear

2. Rendering of the content after popping upjavascript - When the mouse clicks on each picture, the corresponding pop-up content will appear

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">&#215;</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>
Copy after login
Copy after login

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>
Copy after login
Copy after login

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

Related labels：
css html javascript php
source：php.cn
Previous article：utf8_general_ci is not case sensitive, so you have to use utf8_general_cs? Next article：Why is it prompted that the controller cannot be loaded?
Statement of this Website
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
Latest Articles by Author
Latest Issues
PHP arrays obtained from URL parameters do not behave as expected I have a URL parameter that contains the category ID and I want to treat it as an array li...
From 2024-04-06 22:09:02
0
1
1428
Where should I place CustomLog directive in apache I'm using php:7.2-apachedocker. I need to disable health check url login access log. Based...
From 2024-04-06 22:03:59
0
1
990
What is the format of the variables in the return value? I am a new learner of php. I found a piece of code: if($x<time()){return[false,'error']...
From 2024-04-06 21:55:20
0
1
778
Problems encountered when using opentbs to generate odt files: values ​​of the same key are displayed in the same row instead of separate columns. I'm using a library called OpenTbs to create odt using PHP, I'm using it because columns a...
From 2024-04-06 20:18:18
0
1
483
Group MySQL results by ID for looping over I have a table with flight data in mysql. I'm writing a php code that will group and displ...
From 2024-04-06 17:27:56
0
1
406
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template