弹出div,锁定界面

联系:手机(13429648788)  QQ(107644445)

链接:https://www.orasos.com/%e5%bc%b9%e5%87%badiv%ef%bc%8c%e9%94%81%e5%ae%9a%e7%95%8c%e9%9d%a2.html

标题:弹出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>