`
wfdoublext
  • 浏览: 130420 次
  • 性别: 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>

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

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

相关推荐

    多个iframe，显示其中一个frame中的div，并处于最上层显示

    在网页设计和开发中，有时候我们需要处理多个`iframe`（内联框架）并实现特定的交互效果，例如只显示其中一个`iframe`中的`div`元素，并确保它在所有其他元素之上，即处于最上层显示。这样的需求通常出现在需要创建...

    多个iframe，其中一个的div能够处于最上层显示

    这个问题的关键在于理解 `z-index` 和层叠上下文的概念，以及如何正确地应用它们来确保特定的 `div` 能够始终处于最上层。 首先，`z-index` 是 CSS3 中的一个属性，用于控制元素的堆叠顺序。具有较高 `z-index` 值...

    div遮蒙锁定效果大全

    在网页设计中，"div遮蒙锁定效果"是一种常见的交互设计技术，用于提供更好的用户体验，例如在加载新内容、弹出对话框或者显示提示信息时，遮盖住背景页面，让用户注意力集中于特定区域。本篇文章将深入探讨如何使用...

    仿Lightbox效果（Windows关机效果），div覆盖，锁定页面及IE 6实现position:fixed;

    “锁定页面”是指保持页面内容在用户滚动时保持相对固定的位置，这通常通过CSS的`position: fixed`属性来实现。当一个元素的定位设置为固定时，它会相对于浏览器窗口进行定位，即使页面滚动，该元素也会保持在屏幕的...

    div页面框架布局

    在网页设计中，"div页面框架布局"是一个关键的概念，它涉及到如何有效地组织网页内容，以便在各种浏览器中实现良好的显示效果。EasyUI是一个基于jQuery的用户界面库，提供了丰富的组件和布局方案，使得开发者能够...

    div+css设计页面框架

    在网页设计领域，"div+css"是一种广泛采用的技术，用于构建页面布局和样式。Div是HTML中的一个块级元素，全称为“division”，意为分隔或划分，主要用于组织和区分网页内容。CSS（Cascading Style Sheets）则负责...

    div+css登陆页面

    在用户触发某个事件（如点击按钮）时，一个小窗口（可能是一个新的div或者模态对话框）会从页面某个位置滑出，同时，整个页面的背景会逐渐变暗，形成半透明的效果，以突出显示弹出的内容。 实现这个效果有多种方式...

    使用jQuery加载html页面到指定的div实现方法

    一、jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里。 比如：加载a.html里面的&lt;div id=“row”&gt;&lt;/div&gt;这个div里面的所有内容加载到b.html的这个div里&lt;div id=”content...

    经典div+css静态页面

    下面将详细介绍div和CSS在创建静态页面中的重要性、原理以及实际应用。 Div（Division）是HTML中一个非常重要的布局容器标签，它用于分组HTML元素，以实现更好的页面结构和布局控制。Div元素本身没有特定的含义，但...

    测试div显示数据时页面加载时间

    标题“测试div显示数据时页面加载时间”和描述“关于div与table在显示数据时页面但加载时间，通过比较时间可以看出哪个更快”提示我们关注的是两种常见的HTML元素——`div`和`table`在加载大量数据时的性能差异。...

    div布局测试页面

    自己写的div布局测试页面，希望与大家多多分享。谢谢

    Div自定义页面布局

    本篇文章将深入探讨如何使用`Div`进行自定义页面布局。 首先，理解`Div`的基础用法至关重要。`Div`是一个块级元素，意味着它会默认占据整个宽度并换行显示。可以通过设置`display`属性将其变为行内块元素或灵活的...

    Div的静态页面实例

    本实例将深入探讨`div`在静态页面中的应用，帮助初学者快速掌握如何利用`div`构建一个完整的静态页面。 首先，我们来理解`div`的基本概念。`div`是"division"的缩写，它是一个块级元素，意味着它会在其父元素中占据...

    jQuery可拖拽DIV页面

    本项目“jQuery可拖拽DIV页面”利用jQuery及其扩展插件jQuery UI，实现了一个用户界面元素（如div）可以被拖动的功能，从而为用户提供更直观的交互体验。以下是对这个知识点的详细讲解： 1. **jQuery基础**：jQuery...

    网页上div拖拽，弹出div背景变暗

    3. **事件委托**：如果页面上有多个可拖动的div，可以使用事件委托来更高效地管理事件，将事件监听器添加到它们的共同父元素上，然后根据事件的目标元素来处理具体的逻辑。 4. **动态插入HTML**：弹出的div可能需要...

    登陆页面案例（css+div）

    在登录页面中，通常会用div来创建输入框组、登录按钮、可能的错误提示区域等各个部分，这样可以使页面结构清晰，易于管理和维护。 在这个"登陆页面案例"中，我们可以看到以下知识点： 1. **响应式布局**：一个现代...

    浮动div代码

    为了使`div`随着页面滚动而移动，我们需要利用JavaScript动态计算并更新`div`的位置。下面以四个示例函数为例，展示如何根据不同需求调整`div`的位置： 1. **居中显示（`sc1()`）**：此函数使`div`始终位于屏幕中心...

    妙用z-index让一个div显示在最前面

    如果想要让某一个div无论在什么情况下都显示在最前面，可以给它设定一个很大的z-index值，如99999，这样它几乎可以覆盖页面上所有其他定位元素的堆叠顺序。 但是需要注意的是，虽然使用一个非常大的z-index值可以让...

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