js頁面彈窗

1、html元素

<div id="light" class="white_content"> 
    <div id="lightHeader"><span id='xxxx'>詳細資訊 </span>
    <span id="closeSpan"><a href="javascript:void(0)" onclick="closeDiv()">X</a></span></div>
    <div id="lightContent"></div>
</div>

2、css樣式

/**懸浮**/
.white_content {
	display: none;
	position: absolute;
	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;
	padding: 0px;
	border: 2px solid gray;
	background-color: white;
	z-index: 1002;
}
#lightHeader{
	height:30px;
	font-size: 14px;
	background-color: rgb(99,177,223);
	line-height: 30px;
}
#xxxx{
	color:white;
	padding-left: 5px;
	font-weight: bold;
}
#closeSpan{
	position: absolute;
	right: 15px;
	top: 0;
}
#closeSpan a{
	text-decoration: none;
	color: white;
}
#lightContent{
	padding: 5px;
	overflow: auto;
}
/**end懸浮**/

3、js

    //展示資訊
    function showInfo(event){
    	var obj = event.srcElement ? event.srcElement:event.target;
    	//var text = obj.getAttribute("cont");
    	var text2 = obj.innerHTML;
    	//console.log(text);
    	//alert(text2);
    	showDiv(text2);
    	//alert(text);  
    }
    function showDiv(title){
    	var procbg = document.createElement("div"); //首先建立一個div
    	procbg.setAttribute("id","mybg"); //定義該div的id
    	procbg.style.background = "#000000";
    	procbg.style.width = "100%";
    	procbg.style.height = "100%";
    	procbg.style.position = "fixed";
    	procbg.style.top = "0";
    	procbg.style.left = "0";
    	procbg.style.zIndex = "500";
    	procbg.style.opacity = "0.6";
    	procbg.style.filter = "Alpha(opacity=70)";
    	//背景層加入頁面
    	document.body.appendChild(procbg);
    	document.body.style.overflow = "hidden"; //取消滾動條
    	
    	
    	var Idiv = document.getElementById("light");
    	Idiv.style.display = "block";
    	//以下部分要將彈出層居中顯示
    	Idiv.style.left=(document.documentElement.clientWidth-Idiv.clientWidth)/2+document.documentElement.scrollLeft+"px";
    	Idiv.style.top =(document.documentElement.clientHeight-Idiv.clientHeight)/2+document.documentElement.scrollTop-50+"px";
    	
    	document.getElementById('light').style.display='block';
    	var height = $("#light").height();
    	var width = $("#light").width();
    	$("#lightContent").css('height', (height - 42) + 'px');
    	$("#lightContent").css('width', (width -10) + 'px');
    	/*$("#lightContent").height(height - 35);
    	$("#lightContent").width(width);*/
    	//alert(title);
    	$("#lightContent").empty();
    	$("#lightContent").append('<pre>' + title + '  </pre>');
    }
    function closeDiv(){
    	var Idiv=document.getElementById("light");
    	Idiv.style.display="none";
    	document.body.style.overflow = "auto"; //恢復頁面滾動條
    	var body = document.getElementsByTagName("body");
    	var mybg = document.getElementById("mybg");
    	body[0].removeChild(mybg);
    }