Native js pop up layer and the window within it is centered

  • 2020-03-30 02:57:11
  • OfStack

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> 
<TITLE> New Document </TITLE> 
<meta charset="UTF-8"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<style type="text/css"> 
border:2px solid #ffffff; 


<div id="Idiv" style="display:none;"> 
<a href="javascript:void(0)" onclick="closeDiv()"> Click close layer </a> 
<br/>document.documentElement  The difference between <br/>document.documentElement  The difference between  
<div><a href="javascript:void(0)" id="show" onclick="show()"> Click open pop-up layer! </div> 
<script langue="javascript"> 

function show() 
var Idiv=document.getElementById("Idiv");"block"; 
//The following sections center the pop-up layer"px"; 
var aa_scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;"px"; 
// There is a problem here, pop layer left and right center, but the height is not center, show in the upper part, resulting in a  // Part invisible , So I'm going to add it down here for now margin-top 

//The following sections make the entire page unclickable
var procbg = document.createElement("div"); //First, create a div
procbg.setAttribute("id","mybg"); //Define the id of the div ="#000000"; ="100%"; ="100%"; ="fixed"; ="0"; ="0"; ="500"; ="0.6"; ="Alpha(opacity=70)"; 
//Cancel scroll bar
document.body.appendChild(procbg); ="auto"; 

//The following section implements the drag and drop effect of the pop-up layer (if you want the div inside the pop-up layer to move, just log off and remove the following)
var posX; 
var posY; 
if(!e) e = window.event; //IE 
posX = e.clientX - parseInt(; 
posY = e.clientY - parseInt(; 
document.onmousemove = mousemove; 
document.onmouseup =function() 
document.onmousemove =null; 
function mousemove(ev) 
if(ev==null) ev = window.event;//IE = (ev.clientX - posX) +"px"; = (ev.clientY - posY) +"px"; 

function closeDiv() //Close the ejection layer

var Idiv=document.getElementById("Idiv"); 
var mybg = document.getElementById("mybg"); 
document.body.removeChild(mybg);"none"; ="auto";//Restore the page scroll bar
//Change the above pop-up layer to do its own loading with a loading function. Determine whether the page is loaded, and then hide the loading. GIF

<!DOCTYPE html> 
<html xmlns=""> 
<title>New Document </title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<body onload="subSomething()"> 

<script type="text/ecmascript"> 
function show(addressImg, img_w, img_h) { 
//Get the page height
var h = (document.documentElement.scrollHeight > document.documentElement.clientHeight) ? document.documentElement.scrollHeight : document.documentElement.clientHeight; 
//Get the page width
var w = (document.documentElement.scrollWidth > document.documentElement.clientWidth) ? document.documentElement.scrollWidth : document.documentElement.scrollWidth; 
var procbg = document.createElement("div"); //First, create a div
procbg.setAttribute("id", "mybg"); //Define the id of the div = "#555"; = "100%"; = "100%"; = "fixed"; = "0"; = "0"; = "500"; = "0.6"; = "Alpha(opacity=70)"; 
//Cancel scroll bar
document.body.appendChild(procbg); = "auto"; 

var pimg = document.createElement("img"); //Create an img
pimg.setAttribute("id", "bg_img"); //Define the id of the div
pimg.setAttribute("src", addressImg); //Define the id of the div
var img_w = (w - img_w) / 2; 
var img_h = (h - img_h) / 2; = img_h + "px"; = img_w + "px"; = "fixed"; = "0.9"; 
function closeDiv() //Close the ejection layer
var mybg = document.getElementById("mybg"); 
document.body.removeChild(mybg); = "auto";//Restore the page scroll bar
show('loading/loading3.gif', '100', '100'); 
document.onreadystatechange = subSomething;//Execute this method when the page load state changes.
function subSomething() { 
if (document.readyState == "complete") { //Enters when the page is fully loaded

Related articles: