Easy Web Page Popup layer

Today wrote a simple pop-up layer, in order to later work can be reused, specially organized a bit.

First, add the popup layer and assign the ID to Tip_box
<div id= "Tip_box" >
<div id= "Close_box" >x</div>
<p> pop-up layer content </p>
</div>

Call the box () function in HTML

<a href= "javascript:void (0)" onclick= "box ()" ></a>

No separate styling is required, the following JavaScript source code

1 functionbox () {2           varTip_box=document.getelementbyid ("Tip_box")//Get the popup layer ID3           varWrap_box=document.createelement ("div")//Creating a mask layer node4           varClose_box=document.getelementbyid ("Close_box")//get the Close button ID5           vartip_box_w=400//pop-up layer width6           vartip_box_h=200//pop-up layer height7           varTip_box_background= "#fff"//pop-up layer background color8           vartip_box_x= (INNERWIDTH-TIP_BOX_W)/2//pop-up layer horizontal9           vartip_box_y= (INNERHEIGHT-TIP_BOX_H)/2//Eject layer ordinateTen           varWrap_box_w=innerwidth//Mask Layer Width One           varWrap_box_h=innerheight//Mask Layer Height Awrap_box.style.position= "Fixed";  -Wrap_box.style.background= "Rgba (0,0,0,0.5)"; -wrap_box.style.width=wrap_box_w+ "px";  thewrap_box.style.height=wrap_box_h+ "px"; -Wrap_box.style.zindex=98; -wrap_box.style.top=0+ "px"; -close_box.style.position= "Absolute"; +close_box.style.width=30+ "px"; -close_box.style.height=30+ "px"; +close_box.style.top=0+ "px"; Aclose_box.style.right=0+ "px"; atClose_box.style.background= "RGB (0,0,0)"; -Close_box.style.color= "RGB (255,255,255)"; -close_box.style.lineheight=30+ "px"; -close_box.style.textalign= "Center"; -Close_box.style.cursor= "Pointer"; -Close_box.addeventlistener ("click",function(){ inTip_box.style.display= "None"; - Wrap_box.remove () to           }) +tip_box.style.display= "Block"; -tip_box.style.width=tip_box_w+ "px"; thetip_box.style.height=tip_box_h+ "px"; *tip_box.style.zindex=99; $tip_box.style.position= "Absolute";Panax Notoginsengtip_box.style.top=tip_box_y+ "px"; -tip_box.style.left=tip_box_x+ "px"; theTip_box.style.background=Tip_box_background; + document.body.appendChild (Wrap_box) A};

Easy Web Page Popup layer