弹出层，背景半透明隐藏

弹出一个层，然后用一个半透明的层覆盖背景。

代码没有整理，只是贴出代码中的部分，经供参考

 

html，

<style type="text/css">
.show_talk_ajax *{margin:0;padding:0;} 
.show_talk_ajax{width:500px;height:330px;display:none;padding:1px;position:absolute;border:1px solid #4c77aa;background:#f2f7fd;z-index:11;zoom:1;}
.show_talk_ajax h3{background:#4c77aa;color:#fff;padding:0px 0px 0px 5px;cursor:move; }
.show_talk_ajax span{position:absolute;right:3px;top:10px;display:block;cursor:pointer;color:#fff;font-weight:bold;}
</style>

<div id="show" class="show_talk_ajax">
    <h3 id="titlebar">詳細信息</h3>
    <div id="htmC" style="padding:5px">
    </div>
</div>
<div id="coverdiv" style="display:none"></div>

<a href="#" οnclick="showTest('show',00,'coverdiv');return false" >点击</a>

 

 

js代码，

// JavaScript Document
//弹出层，让父框变暗
//_idToShow : 填充内容div的id
//talk_id ： 数据id号
//cover_id ： 遮盖层div的id
function showTest( _idToShow , talk_id , cover_id ){
	//先清空原内容
	document.getElementById("htmC").innerHTML = ""; //'htmC'是内容显示div的id号
	//处理，层的问题
    var iWidth = document.documentElement.clientWidth;
	var iHeight = document.documentElement.clientHeight;
	//覆盖层
	var coverdiv = document.getElementById(cover_id);
	var isIE = (document.all) ? true : false;
	var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);
	//IE6要通过window.attachEvent事件，来改变div大小。
	function _resize(){
		coverdiv.style.position = "absolute";
		coverdiv.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";
		coverdiv.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px";
	}
	if( isIE6){
		var selectlist = document.getElementsByTagName("select");
		var  len = selectlist.length ;
		for( var k =0 ; k < len ; k ++){
			selectlist[k].style.visibility = "hidden";
		}
		window.attachEvent("onresize",_resize);
	}
	with(coverdiv.style){ 
		backgroundColor = "#000"; background ="#000";display = "block"; zIndex = 10; left = top = 0; position = "fixed"; width = height = "100%"; 
		isIE ? filter = "alpha(opacity:" + 30 + ")" : opacity = 30 / 100;
	}
	//弹出层
	var oShow = document.getElementById(_idToShow);
		oShow.style.display = 'block';
        oShow.style.left = (iWidth-oShow.offsetWidth)/2+"px";
		oShow.style.top = document.documentElement.scrollTop + (iHeight -oShow.offsetHeight)/2+"px";
	var oClosebtn = document.createElement("span");
		oClosebtn.innerHTML = "×";
		oShow.appendChild(oClosebtn);
	//关闭方法
	function oClose(){
		oShow.style.display = 'none';
		with(coverdiv.style){display = "none";}
		oShow.removeChild(oClosebtn);
		if(isIE6){
			var selectlist = document.getElementsByTagName("select");
			for( var k =0 , len = selectlist.length ; k < len ; k ++){
				selectlist[k].style.visibility = "visible";
			}
		window.detachEvent("onresize",_resize);
		}
	}
	oClosebtn.onclick = oClose;
	coverdiv.onclick = oClose;
	//ESC键退出
    function getEvent(){
	    return window.event || arguments.callee.caller.arguments[0];
    }
	document.onkeyup = function(){
		var event = getEvent();
		if (event.keyCode == 27){
			oClose();
		}
	}
	//弹出层移动
	var moveX = 0;
	var moveY = 0;
	var moveTop = 0;
	var moveLeft = 0;
	var moveable = false;
	var docMouseMoveEvent = document.onmousemove;
	var docMouseUpEvent = document.onmouseup;
	titleBar =  document.getElementById('titlebar');
	titleBar.onmousedown = function() {
		var evt = getEvent();
		moveable = true;
		moveX = evt.clientX;
		moveY = evt.clientY;
		moveTop = parseInt(oShow.style.top);
		moveLeft = parseInt(oShow.style.left);
		document.onmousemove = function() {
			if (moveable) {
				var evt = getEvent();
				var x = moveLeft + evt.clientX - moveX;
				var y = moveTop + evt.clientY - moveY;
				if ( x > 0 &&( x + oShow.offsetWidth < iWidth) && y > 0 && (y + oShow.offsetHeight < iHeight + document.documentElement.scrollTop ) ) {
					oShow.style.left = x + "px";
					oShow.style.top = y + "px";
				}
			}
		};
		document.onmouseup = function () {
			if (moveable) {
				document.onmousemove = docMouseMoveEvent;
				document.onmouseup = docMouseUpEvent;
				moveable = false;
				moveX = 0;
				moveY = 0;
				moveTop = 0;
				moveLeft = 0;
			}
		};
	}
	//请求数据
	//show_content1( talk_id , "htmC" ) ;
}