`

Div锁屏

    博客分类：
  • js
JavaScriptXHTMLCSSHTML 
阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
 <html xmlns="http://www.w3.org/1999/xhtml">    
 <head>    
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />    
 <title>Demo</title>    
 <style type="text/css">    
     
 *{    
    margin:0;    
    padding:0;    
 }    
 html,body{    
    height:100%;    
 }    
 #shadow{    
    position:absolute;　    
    left:0;    
    top:0;    
    width:100%;    
    height:100%;    
    background-color:#0060C0;    
    filter:alpha(opacity=20);    
 }    
 #box{    
    position:absolute;    
    left:50%;    
    top:50%;    
    width:400px;    
    height:180px;    
    margin:-90px 0 0 -200px;    
    border:1px solid #84A0C4;    
    background-color:#DFE8F6;    
    text-align:center;    
 }    
     
 </style>    
 <script language="javascript" type="text/javascript">    
     
 function createDiv()    
 {    
     var btnShow = document.getElementById("btnshow");    
     btnShow.disabled=true;    
     
     var shadow = document.createElement("div");    
     shadow.setAttribute("id","shadow");    
     shadow.style.zIndex="10";    
     
     var box=document.createElement("div");    
     box.setAttribute("id","box");    
     box.style.zIndex="999";    
         
     var spanUser=document.createElement("span");    
     spanUser.innerHTML="User:";    
     
     var textUser=document.createElement("input");    
     textUser.setAttribute("type","text");    
     textUser.setAttribute("id","textUser");    
     
     var button=document.createElement("input");    
     button.setAttribute("type","button");    
     button.setAttribute("id","button1");    
     button.setAttribute("value","Confirm");    
     button.onclick=hideDiv;    
     
     box.appendChild(spanUser);    
     box.appendChild(textUser);    
     box.appendChild(button);    
     
     document.body.appendChild(shadow);    
     document.body.appendChild(box);    
 }    
 function hideDiv()    
 {    
     var textUser=document.getElementById("textUser");    
     var user=document.getElementById("user");    
     user.value=textUser.value;    
     
     var box=document.getElementById("box");    
     var shadow=document.getElementById("shadow");    
     var btnShow=document.getElementById("btnShow");    
         
     document.body.removeChild(box);    
     document.body.removeChild(shadow);    
     btnShow.disabled=false;       
 }    
     
 </script>    
 </head>    
 <body>    
 <div style="text-align:center">    
 <input id="user" type="text" />    
 <input id="btnshow" type="button" onclick="createDiv()" value="Display" />    
 </div>    
 </body>

分享到：
| 误删资料恢复
评论
发表评论

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

相关推荐

    js div 锁屏

    综上所述，"js div 锁屏"是通过JavaScript和CSS结合实现的一种页面锁定机制，主要应用于临时阻止用户对页面其他部分的交互。它可以通过创建一个全屏div并控制其显示状态来实现，并能根据需要添加各种定制功能，如...

    用Jquery实现DIV锁屏并且可以拖拽DIV窗体代码页面

    在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件...在《用Jquery实现DIV锁屏并且可以拖拽DIV窗体代码页面.docx》文档中，你可以找到更详尽的代码示例和解释，以便进一步学习和应用。

    Jquery实现网页锁屏（DIV遮罩）

    用Jquery实现网页锁屏，解锁。 锁屏：ScreenLocker.lock(100); 参数是z-index 解锁ScreenLocker.unlock();

    弹出div层且锁屏弹出div层且锁屏

    弹出div层且锁屏弹出div层且锁屏弹出div层且锁屏弹出div层且锁屏弹出div层且锁屏弹出div层且锁屏弹出div层且锁屏弹出div层且锁屏弹出div层且锁屏

    div层悬浮窗和锁屏

    在网页设计和开发中，"div层悬浮窗和锁屏"是一个常见的需求，尤其是在构建交互式用户界面时。Div层通常被用作HTML布局的基本构建块，可以用来创建各种元素，如弹出框、提示信息或者浮动窗口。悬浮窗则是指在用户滚动...

    js弹出div层且锁屏

    在JavaScript中，弹出div层并实现锁屏功能是一项常见的前端交互设计，它通常用于创建模态对话框、警告提示或者加载等待效果。这个过程涉及到DOM操作、CSS样式控制以及JavaScript事件处理。下面我们将深入探讨如何...

    Javascript实现弹出DIV层并锁屏

    这就是"Javascript实现弹出DIV层并锁屏"所涉及的主要内容。 首先，让我们了解一下什么是DIV。在HTML中，`&lt;div&gt;`元素是“division”的缩写，用于对网页内容进行区域划分。通过CSS样式，我们可以对这些DIV进行定位、...

    HTML 锁屏页面模板

    首先，我们可以创建一个隐藏的HTML元素，如div，作为锁屏界面的基础。当需要显示锁屏页面时，通过JavaScript将这个元素设置为可见。同时，为了提供交互性，可以添加输入框用于用户输入密码，以及按钮供用户提交验证...

    js实现简单锁屏功能实例

    锁屏层（`tabframe`）是一个绝对定位的`div`，它被放置在了页面的最顶端，覆盖了整个可视区域。通过设置`z-index`属性，确保锁屏层始终在最上层显示，不被其他页面元素遮挡。锁屏层的透明度被调整为10%，背景颜色设...

    网站锁屏机制实现 可以实现网站锁屏功能

    1. **创建锁屏层**：首先，需要在页面中添加一个隐藏的div元素作为锁屏层。这个div应该覆盖整个可视窗口，可以通过设置`position: fixed`和`width`、`height`属性来实现。 2. **显示与隐藏锁屏层**：当需要显示锁屏...

    实现div 遮罩 frameset

    在这个场景中，“实现div 遮罩 frameset”意味着在`frameset`布局的网页上，使用`div`来实现一个可移动的遮罩层或弹出窗口。 首先，我们来看`frameset`。`frameset`是HTML4中的元素，它允许我们将浏览器窗口划分为...

    js 锁屏功能示例(比较齐全)

    通常，我们需要创建一个覆盖整个屏幕的全屏元素（如div），并在锁屏时显示，解锁时隐藏。这涉及到DOM的选择、创建和修改，如`document.getElementById()`，`document.createElement()`，以及`style.display`属性的...

    Css锁屏

    在`divCss.html`中，我们可以看到HTML结构的实现，包括锁屏背景和模型对话框的元素： ```html &lt;div class="lock-screen"&gt;&lt;/div&gt; &lt;div class="model-dialog"&gt; 请输入密码" /&gt; 解锁 &lt;/div&gt; ``` 最后，我们利用...

    如何锁屏JS实现

    如果页面上还没有名为“CoverDiv”的元素，则创建一个新的`&lt;div&gt;`元素，并设置其ID为“CoverDiv”。然后，使用`style.cssText`属性来定义这个对话框的样式，包括字体、颜色、位置、背景色等。值得注意的是，这里...

    可拖动div弹窗

    这个场景描述的“可拖动div弹窗esc关闭 锁屏”涉及到多个技术点，我们将逐一详细解释。 首先，"可拖动div"是指在HTML页面中，通过JavaScript或者jQuery实现一个div元素，用户可以通过鼠标点击并拖动来改变div的位置...

    web页面九宫格手势密码（仿手机九宫格锁屏）

    在移动端应用中，九宫格手势密码是一种常见的安全验证机制，它模仿了手机锁屏的交互方式，为用户提供了便捷且安全的登录体验。本文将详细介绍如何实现一个基于Web的九宫格手势密码功能，主要涉及HTML、CSS和...

    基于JavaScript实现全屏透明遮罩div层锁屏效果

    实现全屏透明遮罩div层锁屏效果是一个常见的需求，它允许开发者在某些操作（如模态对话框、加载提示等）过程中，限制用户的其他页面交互，同时保留页面的可视性。这篇文章将详细地介绍如何使用JavaScript来实现这一...

    javascript弹出层并锁屏

    锁屏功能则是为了防止用户在弹出层显示期间操作背景页面，提供一种专注的用户体验。本文将深入探讨如何使用JavaScript来实现弹出层并锁屏的功能。 首先，我们了解弹出层的基本概念。弹出层通常由HTML结构、CSS样式...

    jQuery仿手机锁屏解锁密码验证代码

    `&lt;div&gt;`元素可以用于构建锁屏界面和错误提示信息。 3. **CSS样式**：`css`目录下的文件负责定义界面的视觉样式。这包括但不限于锁屏界面的背景、输入框样式、按钮样式以及错误提示文字的样式。CSS3的特性，如伪类、...

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