联系:手机/微信(+86 17813235971) QQ(107644445)
标题:弹出div,锁定界面
作者:惜分飞©版权所有[未经本人同意,不得以任何形式转载,否则有进一步追究法律责任的权利.]
如题:本来是可以用ajaxtools控件来实现,但是感觉效果不是很好,而且效率太低,所以就写了一个代码如下
js代码:
function showname()//弹出所需模块 { var show=document.getElementById("shown"); show.style.display=""; document.getElementById("shown").style.top="20px"; document.getElementById("shown").style.left="20px"; suoding(); } function suoding()//锁定界面 { var sWidth,sHeight; sWidth=document.documentElement.clientWidth //当前浏览器内部宽度 sHeight=document.documentElement.clientHeight var Sys = {}; var ua = navigator.userAgent.toLowerCase(); if (window.ActiveXObject)//判断ie,如果是7以下版本,采用屏幕的宽度和高度,会导致显示结果有一点滚动条 { Sys.ie = ua.match(/msie ([\d.]+)/)[1] if(Sys.ie<7) { sWidth=screen.width;//显示器宽度,和上面的宽度有一定的出入 sHeight=screen.height; } } var bgObj=document.createElement("div"); bgObj.setAttribute('id','bgDiv'); bgObj.style.position="absolute"; bgObj.style.top="0"; bgObj.style.background="#cccccc"; bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3, opacity=25,finishOpacity=75"; bgObj.style.opacity="0.6"; bgObj.style.left="0"; bgObj.style.width=sWidth + "px"; bgObj.style.height=sHeight + "px"; bgObj.style.zIndex = "50"; document.body.appendChild(bgObj); } function closename()//关闭 { document.getElementById("shown").style.display="none"; var bg=document.getElementById("bgDiv"); if (bg!=null) {//排除有些浏览器不能取到动态div的情况 document.body.removeChild(bg); } }
html代码:
<div style=”width:1000px;height:300px;background-color:blue”> <input type=”button” value=”点击” onclick=”alert(‘adfadsfd’)”></input></div>
<div style=”position:absolute”>
<a href=”#” onclick=”showname()” >显示姓名</a>
<div id=”shown” style=”width:300px;height:200px;background-color:gray; z-index:100; position:absolute;display:none;”><a href=”#” onclick=”closename()” >关闭</a>
</div>
<div style=”background-color:red;width:100px;height:100px;”></div>
</div>