弹出一个层,然后用一个半透明的层覆盖背景。
代码没有整理,只是贴出代码中的部分,经供参考
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" ) ; }