`
javababy1
  • 浏览: 1224899 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

一段DIV锁屏的代码,提示消息始终处于当前屏的中央

ChromeIEMicrosoftXHTML 
阅读更多

早上在网上找了一下,大部分都实现了基本功能,不过没有我所需要的那种.lightbox2里那种不管页面有多长,弹出的消息都显示在当前屏的中央的那种.想用lightbox的.不过要引用的JS实在太多了.想想也没意思.就直接在网上下的基础上改正了一下.也没有整理一下.

修正了文档有doctype验证时一些问题.同时在IE7,FF3,chrome下测试了一下,效果都一样.


doctype可有可无

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<script>
var docEle = function() {
return document.getElementById(arguments[0]) || false;
}
function openNewDiv() {

var overlayID="overlay";
var msgID = "overlayMsg";
if (docEle(overlayID)) document.removeChild(docEle(overlayID));
if (docEle(msgID)) document.removeChild(docEle(msgID));
// 消息显示
var newDiv = document.createElement("div");
newDiv.id = msgID;
newDiv.style.position = "absolute";
newDiv.style.zIndex = "999";
newDiv.style.width = "200px";
newDiv.style.height = "300px";
var scrolltop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

var _clientheight=0;

//ie FF 在有DOCTYPE时各有区别
_clientheight = Math.min(document.body.clientHeight , document.documentElement.clientHeight);
if(_clientheight==0)
_clientheight= Math.max(document.body.clientHeight , document.documentElement.clientHeight);

var _clientwidth= document.documentElement.clientWidth || document.body.clientWidth;
//整个页面的高度
var _pageheight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);

var msgtop = (scrolltop+(_clientheight-300)/2)+"px";
var msgleft = (_clientwidth-200)/2+"px";
newDiv.style.top = msgtop;
newDiv.style.left =msgleft; // 屏幕居中
newDiv.style.background = "#EFEFEF";
newDiv.style.border = "1px solid #860001";
newDiv.style.padding = "5px";
newDiv.innerHTML = "新激活图层内容";
document.body.appendChild(newDiv);
// 锁屏图层
var newMask = document.createElement("div");
newMask.id = overlayID;
newMask.style.position = "absolute";
newMask.style.zIndex = "998";
newMask.style.width = _clientwidth + "px";
newMask.style.height = _pageheight + "px";
newMask.style.top = "0px";
newMask.style.left = "0px";
newMask.style.background = "#777";
newMask.style.filter ="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
//newMask.style.filter = "alpha(opacity=40)";
newMask.style.opacity = "0.40";

document.body.appendChild(newMask);

// 关闭锁屏
var newA = document.createElement("a");
newA.href = "#";
newA.innerHTML = "关闭激活层";
newA.onclick = function() {
document.body.removeChild(docEle(overlayID));
document.body.removeChild(docEle(msgID));
return false;
}
newDiv.appendChild(newA);

}

</script>

</head>

<body>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<a href="#" onclick="openNewDiv();return false;">激活新层</a>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<input type="button" onclick="aaa()" value="aaa"/>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<a href="#" onclick="openNewDiv();return false;">激活新层</a>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<a href="#" onclick="openNewDiv();return false;">激活新层</a>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<input type="button" onclick="aaa()" value="aaa"/>
<p>网页内容网页内容网页内容</p>
<a href="#" onclick="openNewDiv();return false;">激活新层</a>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<a href="#" onclick="openNewDiv();return false;">激活新层</a>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<input type="button" onclick="aaa()" value="aaa"/>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>

<input type="button" onclick="aaa()" value="aaa"/>
</body>
</html>

以后有空将代码整理一下.现在就看看效果了.

分享到：
| JavaScript用canvas元素实现 2D 和 3D (转 ...
评论
发表评论

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

相关推荐

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

    以上代码实现了当用户点击可拖动的DIV时，显示一个半透明的锁屏遮罩层，而在用户松开鼠标后，遮罩层会淡出消失。这样的设计使得用户可以专注于当前的交互操作，而不会被其他页面元素干扰。 在实际项目中，可能还...

    js div 锁屏

    "js div 锁屏"就是这样的一个技术应用，它通常涉及到两个主要部分：JavaScript代码和HTML结构。 首先，我们创建一个HTML结构，通常是一个名为"lockScreen"的div元素，这个div将覆盖整个页面，以达到锁屏的效果。...

    js控制div全屏

    在网页设计中，有时我们需要将某个`div`元素设置为全屏显示，以提供沉浸式的用户体验或特定功能的实现。JavaScript（简称js）作为一种强大的客户端脚本语言，可以帮助我们轻松实现这一需求。在这个项目中，我们使用...

    div层悬浮窗和锁屏

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

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

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

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

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

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

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

    点击文字弹出一个DIV层窗口代码

    点击文字弹出一个DIV层窗口代码,下载就能用

    Div可拖动窗口，弹出提示消息窗口

    在这个“Div可拖动窗口，弹出提示消息窗口”的项目中，我们主要关注的是如何利用JavaScript来实现两个关键功能：一是使Div元素具备拖动和大小调整的能力，二是创建一个弹出的提示消息窗口，其效果类似于QQ的屏幕右下...

    js实现简单锁屏功能实例

    其中，`tag` 是一个布尔值，用于判断当前是执行锁屏还是解锁屏。`title` 代表锁屏时显示的标题，`width` 和 `height` 分别代表锁屏层和子层对话框的宽高尺寸，`url` 是子层中iframe的地址。 锁屏层（`tabframe`）是...

    js移动div源代码

    在本主题“js移动div源代码”中，我们将深入探讨如何使用JavaScript来操作网页中的div元素，实现其位置的动态改变，从而创造出更丰富的用户界面。 首先，我们需要理解HTML中的`&lt;div&gt;`标签。`&lt;div&gt;`是“division”的...

    js弹出div消息提示插件

    Thinksns是一款开源的社交系统，它可能包含了各种组件和功能，其中之一就是这个js弹出div消息提示插件。将这样的功能从整个项目中分离出来，有助于开发者单独使用或在其他项目中复用这一组件。 "ymPrompt"可能是该...

    js弹出div层且锁屏

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

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

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

    css+div经典代码大全

    描述：此资源提供了一系列CSS与DIV结合的经典代码实例，旨在帮助前端开发者理解和掌握如何运用CSS对DIV元素进行样式设计和布局控制，从而实现复杂且美观的网页界面。 标签：“Css代码”表示该文档聚焦于CSS语言的...

    精通CSS+Div源代码

    《精通CSS+Div源代码》是一本面向初学者的实用教程，旨在帮助读者掌握使用CSS（层叠样式表）和Div（HTML布局容器）进行网页设计的核心技能。这本书的配套光盘包含了所有实例的源代码，使学习者能够直接查看和实践...

    写入cookie后只显示一次的DIV提示框代码

    标题中的“写入cookie后只显示一次的DIV提示框代码”指的是在网页开发中使用JavaScript或jQuery实现的一个功能。这个功能通常用于用户首次访问网站时显示一个提示信息，如欢迎语、通知或重要声明，一旦用户关闭这个...

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

    【jQuery仿手机锁屏解锁密码验证代码】是一个用于创建类似手机锁屏界面的JavaScript插件，主要基于jQuery库实现。这个代码实现的功能是用户在触屏设备上输入四位数字密码，然后进行验证。如果两次输入的密码不一致，...

    Javascript实现弹出DIV层并锁屏

    在网页设计中，经常需要实现一个功能，即在用户进行特定操作时，弹出一个DIV层来显示信息或者进行交互，同时锁定背景，防止用户在弹出层显示时与页面其他部分互动。这就是"Javascript实现弹出DIV层并锁屏"所涉及的...

    写入cookie后只显示一次的DIV提示框代码.rar

    本资源“写入cookie后只显示一次的DIV提示框代码.rar”提供了一个JavaScript实现，它允许开发者创建一个只在用户首次访问网站时显示一次的提示框。这种功能常见于欢迎消息、通知或者用户同意隐私政策的场景。 首先...

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