如何让JS弹出的层绝对屏幕居中

joewalker

浏览: 211992 次
性别:
来自: 广州

最近访客更多访客>>

xyzcia

xiaobojava

fs951185627

1621326529

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

非常好的一个JS资源，通过简单的样式控制实现层绝对屏幕居中，并且层后面的内容处于禁用状态。在开发中用途很大，转载分享给大家！！

如何让JS弹出的层绝对屏幕居中

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
/*弹出层的STYLE*/
html,body {height:100%; margin:0px; font-size:12px;}

.mydiv {
background-color: #ff6;
border: 1px solid #f90;
text-align: center;
line-height: 40px;
font-size: 12px;
font-weight: bold;
z-index:99;
width: 300px;
height: 120px;
left:50%;/*FF IE7*/
top: 50%;/*FF IE7*/

margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */
margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/

margin-top:0px;

position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/

_top:       expression(eval(document.compatMode &&
            document.compatMode=='CSS1Compat') ?
            documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
            document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/

}

.bg {
background-color: #ccc;
width: 100%;
height: 100%;
left:0;
top:0;/*FF IE7*/
filter:alpha(opacity=50);/*IE*/
opacity:0.5;/*FF*/
z-index:1;

position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/

}
/*The END*/

</style>
<script type="text/javascript">
function showDiv(){
document.getElementById('popDiv').style.display='block';
document.getElementById('bg').style.display='block';
}

function closeDiv(){
document.getElementById('popDiv').style.display='none';
document.getElementById('bg').style.display='none';
}

</script>
</head>

<body>

<div id="popDiv" class="mydiv" style="display:none;">恭喜你！ 你的成绩为:60分 
<a href="javascript:closeDiv()">关闭窗口</a></div>
<div id="bg" class="bg" style="display:none;"></div>

分享到：

MySQL索引类型一览让MySQL高效运行起来 | 多表关联的批量更新与删除方法

2010-03-25 14:16
浏览 5126
评论(2)
论坛回复 / 浏览 (2 / 7093)
分类:Web前端
查看更多

2 楼 yzsunlight 2010-03-29

楼主写的好顶了

1 楼 yvonxiao 2010-03-28

层后面的内容虽然不能点击了，但是可以通过tab建移动焦点进去，如果焦点移到文本框的，可以输入内容，移到按钮再按回车也会触发事件，并不是真正禁用了，这个东西必须还要配合对按下tab键时对事件的控制才行，jQuery UI里的Dialog就是那样做的

发表评论

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

相关推荐

避开10大常见坑：DeepSeekAPI集成中的错误处理与调试指南.pdf: 在日常的工作和学习中，你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼？DeepSeek 或许就是你一直在寻找的解决方案！它以其高效、智能的特点，在各个行业都展现出了巨大的应用价值。然而，想要充分发挥 DeepSeek 的优势，掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发，为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习，你将能够轻松地运用 DeepSeek 解决实际问题，提升工作效率和质量，让自己在职场和学术领域脱颖而出。现在，就让我们一起开启这场实用又高效的学习之旅吧！

前端分析-2023071100789: 前端分析-2023071100789

基于kinect的3D人体建模C++完整代码.cpp: 基于kinect的3D人体建模C++完整代码.cpp

搞机工具箱10.1.0.7z: 搞机工具箱10.1.0.7z

GRU+informer时间序列预测（Python完整源码和数据）: GRU+informer时间序列预测（Python完整源码和数据），python代码，pytorch架构,适合各种时间序列直接预测。适合小白，注释清楚，都能看懂。功能如下：代码基于数据集划分为训练集测试集。 1.多变量输入，单变量输出/可改多输出 2.多时间步预测，单时间步预测 3.评价指标：R方 RMSE MAE MAPE，对比图 4.数据从excel/csv文件中读取，直接替换即可。 5.结果保存到文本中，可以后续处理。代码带数据，注释清晰，直接一键运行即可，适合新手小白。

性价比革命：DeepSeekAPI成本仅为GPT-4的3%的技术揭秘.pdf: 在日常的工作和学习中，你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼？DeepSeek 或许就是你一直在寻找的解决方案！它以其高效、智能的特点，在各个行业都展现出了巨大的应用价值。然而，想要充分发挥 DeepSeek 的优势，掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发，为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习，你将能够轻松地运用 DeepSeek 解决实际问题，提升工作效率和质量，让自己在职场和学术领域脱颖而出。现在，就让我们一起开启这场实用又高效的学习之旅吧！

基于ANSYS LSDyna的DEM-SPH-FEM耦合模拟滑坡入水动态行为研究,基于ANSYS LSDyna的DEM-SPH-FEM耦合的滑坡入水模拟分析研究,基于ansys lsdyna的滑坡入水: 基于ANSYS LSDyna的DEM-SPH-FEM耦合模拟滑坡入水动态行为研究,基于ANSYS LSDyna的DEM-SPH-FEM耦合的滑坡入水模拟分析研究,基于ansys lsdyna的滑坡入水模拟dem-sph-fem耦合 ,基于ANSYS LSDyna; 滑坡入水模拟; DEM-SPH-FEM 耦合,基于DEM-SPH-FEM耦合的ANSYS LSDyna滑坡入水模拟

auto_gptq-0.6.0-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl: auto_gptq-0.6.0-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl

复件复件建设工程可行性研究合同[示范文本].doc: 复件复件建设工程可行性研究合同[示范文本].doc

13考试真题最近的t64.txt: 13考试真题最近的t64.txt

Microsoft Visual C++ 2005 SP1 Redistributable PackageX86: 好用我已经解决报错问题

嵌入式开发入门：用C语言点亮LED灯的全栈开发指南.pdf: # 踏入C语言的奇妙编程世界在编程的广阔宇宙中，C语言宛如一颗璀璨恒星，以其独特魅力与强大功能，始终占据着不可替代的地位。无论你是编程小白，还是有一定基础想进一步提升的开发者，C语言都值得深入探索。 C语言的高效性与可移植性令人瞩目。它能直接操控硬件，执行速度快，是系统软件、嵌入式开发的首选。同时，代码可在不同操作系统和硬件平台间轻松移植，极大节省开发成本。学习C语言，能让你深入理解计算机底层原理，培养逻辑思维和问题解决能力。掌握C语言后，再学习其他编程语言也会事半功倍。现在，让我们一起开启C语言学习之旅。这里有丰富教程、实用案例、详细代码解析，助你逐步掌握C语言核心知识和编程技巧。别再犹豫，加入我们，在C语言的海洋中尽情遨游，挖掘无限可能，为未来的编程之路打下坚实基础！

auto_gptq-0.4.2-cp38-cp38-win_amd64.whl: auto_gptq-0.4.2-cp38-cp38-win_amd64.whl

自动立体库设计方案.pptx: 自动立体库设计方案.pptx

手把手教你用C语言实现贪吃蛇游戏：从算法设计到图形渲染.pdf: # 踏入C语言的奇妙编程世界在编程的广阔宇宙中，C语言宛如一颗璀璨恒星，以其独特魅力与强大功能，始终占据着不可替代的地位。无论你是编程小白，还是有一定基础想进一步提升的开发者，C语言都值得深入探索。 C语言的高效性与可移植性令人瞩目。它能直接操控硬件，执行速度快，是系统软件、嵌入式开发的首选。同时，代码可在不同操作系统和硬件平台间轻松移植，极大节省开发成本。学习C语言，能让你深入理解计算机底层原理，培养逻辑思维和问题解决能力。掌握C语言后，再学习其他编程语言也会事半功倍。现在，让我们一起开启C语言学习之旅。这里有丰富教程、实用案例、详细代码解析，助你逐步掌握C语言核心知识和编程技巧。别再犹豫，加入我们，在C语言的海洋中尽情遨游，挖掘无限可能，为未来的编程之路打下坚实基础！

性能对决：DeepSeek-V3与ChatGPTAPI在数学推理场景的基准测试.pdf: 在日常的工作和学习中，你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼？DeepSeek 或许就是你一直在寻找的解决方案！它以其高效、智能的特点，在各个行业都展现出了巨大的应用价值。然而，想要充分发挥 DeepSeek 的优势，掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发，为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习，你将能够轻松地运用 DeepSeek 解决实际问题，提升工作效率和质量，让自己在职场和学术领域脱颖而出。现在，就让我们一起开启这场实用又高效的学习之旅吧！

从零到一：手把手教你用Python调用DeepSeekAPI的完整指南.pdf: 在日常的工作和学习中，你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼？DeepSeek 或许就是你一直在寻找的解决方案！它以其高效、智能的特点，在各个行业都展现出了巨大的应用价值。然而，想要充分发挥 DeepSeek 的优势，掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发，为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习，你将能够轻松地运用 DeepSeek 解决实际问题，提升工作效率和质量，让自己在职场和学术领域脱颖而出。现在，就让我们一起开启这场实用又高效的学习之旅吧！

为什么你的switch总出bug？90%新手不知道的break语句隐藏规则.pdf: # 踏入C语言的奇妙编程世界在编程的广阔宇宙中，C语言宛如一颗璀璨恒星，以其独特魅力与强大功能，始终占据着不可替代的地位。无论你是编程小白，还是有一定基础想进一步提升的开发者，C语言都值得深入探索。 C语言的高效性与可移植性令人瞩目。它能直接操控硬件，执行速度快，是系统软件、嵌入式开发的首选。同时，代码可在不同操作系统和硬件平台间轻松移植，极大节省开发成本。学习C语言，能让你深入理解计算机底层原理，培养逻辑思维和问题解决能力。掌握C语言后，再学习其他编程语言也会事半功倍。现在，让我们一起开启C语言学习之旅。这里有丰富教程、实用案例、详细代码解析，助你逐步掌握C语言核心知识和编程技巧。别再犹豫，加入我们，在C语言的海洋中尽情遨游，挖掘无限可能，为未来的编程之路打下坚实基础！

用deepseek变现实操流程: 用deepseek变现实操流程，小白必看。

10个必知的DeepSeekAPI调用技巧：从鉴权到限流全解析.pdf: 在日常的工作和学习中，你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼？DeepSeek 或许就是你一直在寻找的解决方案！它以其高效、智能的特点，在各个行业都展现出了巨大的应用价值。然而，想要充分发挥 DeepSeek 的优势，掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发，为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习，你将能够轻松地运用 DeepSeek 解决实际问题，提升工作效率和质量，让自己在职场和学术领域脱颖而出。现在，就让我们一起开启这场实用又高效的学习之旅吧！

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论