全屏蒙板添加

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

< style >

. runyuanAddr {

text-align : center ;

font-size : 40 px ;

}

. address_runyuan h4 {

text-align : center ;

height : 50 px ;

margin : 20 px auto ;

background : # 8becbc ;

font-size : 20 px ;

line-height : 50 px ;

}

p . addressCon {

overflow : hidden ;

margin : 25 px 0 ;

}

p . addressCon span {

overflow : hidden ;

float : left ;

width : 38 % ;

margin-right : 2 % ;

font-size : 16 px ;

line-height : 28 px ;

}

p . addressCon img {

width : 60 % ;

float : left ;

cursor : pointer ;

transition : all .3 s ;

}

# branch span {

margin : 0 0 0 2 % ;

}

# addImg {

top : 0 ;

text-align : center ;

font-size : 30 px ;

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 >

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

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

< p class = " addressCon " id = " mainCenter " >

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

公司电话：010-64332680 < br >

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

传真：010-64364822 < br >

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

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

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

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

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

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

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

</ p >

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

< p class = " addressCon " id = " branch " >

< img src = " 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>

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