js页面弹窗

刺骨的言语ヽ痛彻心扉 2022-09-26 04:58 243阅读 0赞

1、html元素

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);
        }