1 --- html
<html lang="zh-CN" id="topHtml">
<div id="bgPox" style="display: none;"></div> //阴影
<div id="popUpBox" style="display: none;"> //弹框
<div style="float: right;margin: 20px;cursor: pointer;" οnclick="hideBox()">X</div>
<div class="detailInfo">
<div>
<div>姓名: 张三</div>
<div>性别: 男</div>
<div>民族: 汉</div>
<div>编号: 1000</div>
<div>项目: 高科技</div>
</div>
<div>
<div>政治面貌: 群众</div>
<div>工作时间: 2022-01-01</div>
<div>户口所在地: 北京</div>
<div>部门: 总承包</div>
<div>性质: 全职</div>
</div>
</div>
<div class="endContent">要做就做最好，要不就不做！</div>
</div>
2 css
<style>
#popUpBox{
display: block;
width: 800px;
height: 330px;
background-color: #eee;
margin: 0 auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 532px;
z-index: 3;
border-radius: 8px;
}
#bgPox{
width: 100%;
height: 100%;
text-align: center;
background-color: rgba(0, 0, 0, 0.74);
position: absolute;
top: 0;
left: 0;
font-size: 1.3rem;
color: #fff;
line-height: 8rem;
z-index: 3;
}
.detailInfo{
display: flex;
justify-content: space-between;
margin: 50px 30px;
font-size: 23px;
color: #000;
}
.endContent{
font-size: 23px;
color: #000;
margin-left: 30px;
}
</style>
3----js
<script>
function showBox(){
$(window).scrollTop(0) //显示弹窗滚动到顶部
$("#topHtml").css("overflow","hidden"); //隐藏html滚动条
$("#popUpBox").show()
$("#bgPox").show()
}
function hideBox(){
$("#topHtml").css("overflow","auto");
$("#popUpBox").hide()
$("#bgPox").hide()
}
$(document).ready(function(){
// let template = '<span class="sanjiao"></span>'
// $('.sss').html(template);
//$('#btn').modal()
let template2 = ''
for(let i = 0; i<3; i++){
template2 += `
<div class="staffList">
<div class="staffLeft">
<div >
<img src="../img/new.png" style="width:156px;height:197px;">
</div>
<div class="staffInfo">
<div style="font-weight:bold;font-size:24px;color:#000;">王多鱼</div>
<div style="margin-top:20px;">公司：总公司</div>
<div class="_t">项目：格纳斯大厦</div>
<div class="_t">部门：总经办</div>
<div class="_t">岗位：总经理</div>
</div>
</div>
<div class="staffRight">
<div>（编号：0028517）</div>
<button type="button" style="margin-top:40px;" class="btn btn-primary" οnclick="showBox();">
查看详情
</button>
</div>
</div>
`
}
$('.staffListWrap').html(template2)
})
})
</script>
扫一扫
312
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
