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();
})
}