jq点击弹窗出现对应的内容图片标题

html

 

                                <div class="swiper-slide store_item store_bg border20 tab_btn"

                                    data-img="static/demo/chuneng/cngypro2.png" data-title="20尺液冷集装箱(单/双开门)">

                                    <textarea style="display: none;" class="datacontent">

                                        <p>111</p>

                                        <p>2222</p>

                                    </textarea>

                                    <textarea style="display: none;" class="datatable">

                                        <div class="pipeline_tab">

                                            <table border="0" cellspacing="0">

                                                <tr>

                                                    <td colspan="2">11</td>

                                                </tr>

                                                <tr class="pipeline_tr1">

                                                    <td colspan="2">222</td>

                                                </tr>

                                             </td>

                                                </tr>

                                                <tr>

                                                    <td>PACK 箱防护等级</td>

                                                    <td>IP65</td>

                                                </tr>

                                                <tr>

                                     

                                                <tr>

                                                    <td>通讯方式</td>

                                                    <td>CAN/RS485/LAN</td>

                                                </tr>

                           

                           

                                                <!-- rowspan=""竖合并 -->

                                                <!-- colspan=""横合并 -->

                                            </table>

                                        </div>

                                    </textarea>

                                    <ul class="store_ul1">

                                        <h4 class="store_h4">20尺液冷集装箱(单/双开门)</h4>

                                        <p class="store_p1">选⽤热稳定性⾼的磷酸铁锂体系电芯</p>

                                        <p class="store_p1">IP54防护等级，满⾜⼾外应⽤需求</p>

                                        <p class="store_p1">C5防腐，满⾜15年使⽤需求</p>

                                        <p class="store_p1">预防为主的多级消防策略</p>

                                        <!--<p class="store_p1">选⽤协鑫⾃有的先进电极材料</p>-->

                                        <p class="ab7bp7 esgd_p3 esgd_p33">

                                            <a href="javascript:;" class="pubmore pubmore-fff ">

                                                <span class="pwz">

                                                    <span class="pwz1">探索更多</span>

                                                    <span class="pwz2">探索更多</span>

                                                </span>

                                                <span class="psvg">

                                                    <svg class="svg-fff svg-1" focusable="false" aria-hidden="true"

                                                        viewBox="0 0 30 30">

                                                        <path fill-rule="evenodd" clip-rule="evenodd"

                                                            d="M29.9995 29L29.9995 0.999451L29.9995 -0.000549316H28.9995H0.999527L0.999528 1.99945L26.5864 1.99945L0.292969 28.2928L1.70718 29.7071L27.9995 3.41471L27.9995 29H29.9995Z">

                                                        </path>

                                                    </svg>

                                                    <svg class="svg-000 svg-2" focusable="false" aria-hidden="true"

                                                        viewBox="0 0 30 30">

                                                        <path fill-rule="evenodd" clip-rule="evenodd"

                                                            d="M29.9995 29L29.9995 0.999451L29.9995 -0.000549316H28.9995H0.999527L0.999528 1.99945L26.5864 1.99945L0.292969 28.2928L1.70718 29.7071L27.9995 3.41471L27.9995 29H29.9995Z">

                                                        </path>

                                                    </svg>

                                                </span>

                                            </a>

                                        </p>

                                    </ul>

                                    <ul class="store_ul2">

                                        <img src="static/demo/chuneng/cngypro2.png?v1" />

                                    </ul>

                                </div>

 

    <!-- 弹窗 -->

    <div class="abt26btc">

        <div class="tab_main">

            <div class="pro_stolist">

                <ul class="stolist_ul1">

                    <!-- 图片 -->

                    <img class="pop_src" src="" alt="">

                </ul>

                <ul class="stolist_ul2">

                    <!-- 标题 -->

                    <h4 class="store_h4 pop_title"></h4>

                    <!-- 内容 -->

                    <div class="pop_con1"></div>

                </ul>

            </div>

            <!-- 表格 -->

            <div class="pop_table"></div>

        </div>

        <span class="abt26btcclose"></span>

    </div>

    <div class="abt26btcbg"></div>

 

css

.abt26btcbg {

    position: fixed;

    left: 0;

    top: 0;

    width: 100%;

    height: 100vh;

    z-index: 3000;

    background: #000;

    opacity: 0.5;

    display: none;

}

.abt26btc {

    position: fixed;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    z-index: 3100;

    display: none;

    height: 900px;

    width: 80%;

    max-width: 1200px;

    overflow-y: scroll;

    padding: 100px 0;

}

.abt26btcclose {

    width: 40px;

    height: 40px;

    position: absolute;

    top: 150px;

    right: 80px;

    background: url(../img/close.png) center no-repeat;

    background-size: cover;

    z-index: 3200;

    display: none;

}

 

js

        showpop();

        function showpop() {

            $('.tab_btn').click(function () {

                $('.abt26btc').show();

                $('.abt26btcbg').show();

                $('.abt26btcclose').show();

                // 标题

                let title = $(this).data("title");

                $('.pop_title').text(title)

                // 内容

                let con1 = $('.datacontent').val();

                $('.pop_con1').html(con1)

                //表格

                let table = $('.datatable').val();

                $('.pop_table').html(table);

                // 图

                let imgSrc = $(this).data("img");

                $('.pop_src').attr('src', imgSrc);

            })

            $('.abt26btcclose').click(function () {

                $('.abt26btc').hide();

                $('.abt26btcbg').hide();

                $('.abt26btcclose').hide();

            })

            $('.abt26btcbg').click(function () {

                $('.abt26btc').hide();

                $('.abt26btcbg').hide();

                $('.abt26btcclose').hide();

            })

        }