全屏蒙板添加

<divclass="address_runyuan"style="margin:0 auto;width:1200px;">

<style>

.runyuanAddr{

text-align:center;

font-size:40px;

}

.address_runyuan h4{

text-align:center;

height:50px;

margin:20px auto;

background:#8becbc;

font-size:20px;

line-height:50px;

}

p.addressCon{

overflow:hidden;

margin:25px0;

}

p.addressCon span{

overflow:hidden;

float:left;

width:38%;

margin-right:2%;

font-size:16px;

line-height:28px;

}

p.addressCon img{

width:60%;

float:left;

cursor:pointer;

transition:all .3s;

}

#branch span{

margin:00 02%;

}

#addImg{

top:0;

text-align:center;

font-size:30px;

color:#bdeabd;

font-weight:bold;

background:rgba(0,0,0,.4);

width:100%;

height:100%;

position:absolute;

}

#addImg img{

position:absolute;

left:0;

right:0;

top:0;

bottom:0;

margin:auto;

}

</style>

<h1class="runyuanAddr">怎么去润元？</h1>

<h4>朝阳区总部</h4>

<pclass="addressCon"id="mainCenter">

<span>公司总部:北京朝阳区酒仙桥东路电子城(牡丹集团)M8楼西二层<br>

公司电话：[phone] <br>

24小时免费热线：400-64-17800<br>

传真：[phone]<br>

公交站：可乘坐516路、847路、专124路在 酒仙桥东路南口 下车 <br>

地铁14号线（将台站）B口出可换乘516路<br>

地铁10号线（农业展览馆）A口出可换乘516路<br>

地铁8号线（安华桥）D1口出可换乘847路<br>

地铁5号线（和平西桥）A口可换乘847路<br>

为避免耽误您的时间推荐您选择地铁出行，地铁将台站下车换乘516路两站地即到</span>

<imgsrc="images/mudanjituan.png"alt="润元装饰朝阳总部">

</p>

<h4style="text-align:center;height:50px;margin:20px auto;background: #adf;font-size:20px;line-height:50px;">六里桥分部</h4>

<pclass="addressCon"id="branch">

<imgsrc="images/yinhedasha.png"alt="润元装饰银河大厦分部">

<span>

公司分部：北京市丰台六里桥南银河大厦601 <br>

乘车方式：乘坐 201路、205路、300路内环、300路外环、323路、323路快、324路、349路、368路、483路、67路、617路、631路、631路快车、658路、678路、691路、698路、699路、820路、821路、840路、845路、944路、968路、968路快、969路、977路、993路、特2路、特7路、特8路内环、特8路快内环、特8路外环、特8路快外环、运通103路、运通108路、运通201路、专3路。到“六里桥南”下车即到。</span>

</p>

<script>

$('.addressCon').on('click','img',function(){

// console.log($(this).attr('src'))

let winH = $(document).height()|| $('body').height();

let scrollT = $(window).scrollTop()|| $('body').scrollTop();

$('body').append('</div><div id="addImg">双击或按ESC退出<img src='+$(this).attr('src')+'></div>');

$('body').css('overflow','hidden');

$('#addImg').css('top',scrollT);

$('#addImg').on('dblclick',function(){

$(this).remove();

$('body').css('overflow','auto');

});

$(window).on('keydown',function(e){

if(e.keyCode==27){

$('#addImg').remove();

$('body').css('overflow','auto');

}

})

});

</script>

</div>

原来是想让蒙板随滚动条滚动而滚动，但是在chrome下出现闪动的情况，百度搜出的结果是

在绝对定位元素上添加一个元素

<div style="position:fixed;visibility:hidden;"></div>

但是我的测试是没有用的、、、、