`
wfdoublext
  • 浏览: 131609 次
  • 性别: Icon_minigender_1
  • 来自: 青岛
社区版块
存档分类
最新评论

div 最上层锁定页面

JavaScript.net 
阅读更多

http://www.ajaxbbs.net/ymPrompt2.0/#entrymore

 

 

<SCRIPT language="javascript">
<!--
function lock(menu)       //锁定函数
{menu.style.display="none"?'':''; //打开蒙版
document.cookie="lock=yes";   //设置cookies,使锁定长期有效,
lockpwd.focus();        //密码框直接获取焦点
}

function unlock(menu)      //解锁函数
{
menu.style.display=""?'none':'none'; //去除蒙版,达到解锁
document.cookie="lock=no";    //设置cookie
return false;
}

function cklock()         //对输入的密码进行验证
{  
if (lockpwd.value==getcookie('lockpwd')) //验证密码与cookie密码
{ unlock(lockform);}
else
{alert("密码错误,请重新输入!");
lockpwd.value="";
lockpwd.focus();
return false;}
}
function getcookie(name)       //获取cookies,用来验证输入的密码
{
    var aCookie = document.cookie.split("; ");   //取得所有cookies,并放置到数组中:[cookie名=值]
    for (var i=0; i < aCookie.length; i++)     //遍历所有cookies
{
   aCrumb = aCookie[i].split("=");     //将cookie名和值分开
    if (name==aCrumb[0])        //验证cookie名
    { return aCrumb[1]; }        //返回cookie值
}
}
-->
</script>
<style>
<!--
body{overflow-y:visible;overflow-x:visible; }
body,div,input{text-align:center;font-size:10pt;font-face:微软雅黑;}
input{height:20;}
#lockbtn{float:left;margin-left:50px;cursor:hand;}
#lockform,#locklayer{
position: absolute;
width:expression(this.parentNode.scrollWidth);
top:expression(this.parentNode.scrollTop);
left=0; height:100%;right:0; bottom:0;
}
#lockform { z-index:1}
#locklayer{ z-index:1;background-color:#AAA;filter:alpha(opacity=50);}
#locktab{
position: absolute;
top:250px;left:expression(this.parentNode.scrollWidth/2-100);
background-color:#FDFEFF; z-index:2;width:200px;height:60px;
border-style: solid; border-width: 1px;border-color:green;color:red;
}
#lockck{border:0;background:fff;color:red;}
-->
</style>

<body>
<div id="lockbtn" onclick="lock(lockform);">锁定</div>
<div id="lockform" style="display:none;">
<div id="locklayer"></div>
<div id="locktab">
<input id="lockck" type="submit" value="请输入解锁密码:" onfocus="cklock();" >
<div><input id="lockpwd" type="password" name="lockpwd" onfocus="this.value=''" size=16></div>
</div>
</div>
</body>

分享到：
| 跨业面触发事件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js实现简单锁屏功能实例

    通过设置`z-index`属性，确保锁屏层始终在最上层显示，不被其他页面元素遮挡。锁屏层的透明度被调整为10%，背景颜色设为黑色，以实现半透明的效果，使得用户能够看到锁屏层之下的内容。 子层（`subdialog`）是一个...

    jquery做的一个简单的屏幕锁定提示框

    `background-color`来设置背景颜色，`z-index`来设置层级，确保提示框在最上层显示；`opacity`设置透明度，以半透明效果来表现提示框；`position`、`top`和`left`则用来确定提示框的具体位置。 4. 兼容性：代码中...

    弹出层锁窗口 背景变灰 支持Firefox ie6 ie7 opera safari --IGad

    在CSS方面，可以创建一个覆盖整个屏幕的div元素，设置其背景颜色为半透明的灰色，并通过定位使其始终位于页面最上层。例如： ```css .modal-background { position: fixed; top: 0; left: 0; width: 100%; ...

    Ajax在请求过程中显示进度的简单实现

    而`z-index`属性使得图片可以显示在页面的最上层。遮罩层&lt;div&gt;的`opacity`属性设置为透明度，以显示加载动画的效果。 在JavaScript方面，我们可以通过jQuery库来实现Ajax请求。通过覆盖jQuery的`$.ajax`方法，可以...

Magicbox
Global site tag (gtag.js) - Google Analytics