<!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=gbk" />
<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*/
}<br>
.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*/
_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*/
}
/*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 style="height:1800px;"></div>
<div id="popDiv" class="mydiv" style="display:none;">恭喜你！<br/>你的成绩为:60分<br/>
<a href="javascript:closeDiv()">关闭窗口</a></div>
<div id="bg" class="bg" style="display:none;"></div>
<div style="padding-top: 20px;">
<input type="Submit" name="" value="显示层" onclick="javascript:showDiv()" />
</div>
</body>
</html>
highfly-s
- 浏览: 100404 次
- 性别:
- 来自: 北京
-
最新评论
-
_大大大雄：
关于这个应用, 有些东西想要请教下您行么?
jsp 权限过滤器的应用 -
jptiancai：
博主，看了博客，收获很多，这个例子运行的时候，会报下面的错误： ...
jsp 权限过滤器的应用
分享到：
发表评论
-
backbone学习资料
2015-07-20 16:37 642理论知识 backbone.js 初探http://we ... -
解析目录树
2015-06-19 19:31 500<ul id="test"> ... -
csv生成
2015-06-19 19:29 636<head> <meta -
网站性能优化解决方案
2015-06-15 14:40 749最近通过查阅资料，发现了一些其他可以提高性能优化的方案1. 使 ... -
八种创建等高列布局
2015-01-04 17:11 592高度相等列在Web页面设计中永远是一个网页设计师的需求。如果 ... -
多次调用同一异步方法体会出现使用相同的属性值问题
2014-11-27 17:56 1701《一》执行同一个方法体，里面有异步的逻辑代码，如果这个异步 ... -
时间的计算
2014-11-19 14:42 595using System; namespace Be ... -
async when then
2014-11-14 11:45 675function test1(){ var def ... -
异步并行串行编程 when
2014-11-14 11:40 723var data = { "51": ... -
HTML 与javascript自解码机制
2014-02-19 14:41 1271关于这个自解码机制，我们直接以一个例子（样例0）来进行说明： ... -
三列百分之比布局
2014-02-11 13:56 662三列布局自适应 -
JSp生重复提交解决方法
2014-01-08 15:42 711看了网上的，有几种方法： 1 在你的表单页里HEAD区加入这段 ... -
AMD 和 CMD 的区别有哪些？
2013-12-25 11:37 735AMD 是 RequireJS 在推广过程中对模块定义的规范化 ... -
firefox 专属css hack
2013-12-20 15:50 705之前只有ie6、ie6、firefox时,只要写!impo ... -
自适应网页设计
2013-11-29 10:39 793一、简单描述：随着移 ... -
跨浏览器兼容性总结
2013-11-25 10:16 3471一、 CSS样式兼容 1. F ... -
IE6 PNG背景透明解决方法（汇总）
2013-10-31 18:25 670IE6 PNG背景透明解决方法（汇总） 方法一： IE6 ... -
兼容IE6 min-width 的CSS 样式
2013-10-23 19:12 877IE6另外一个bug就是它不支持 min-width 属性. ... -
IE6 position:fixed bug (固定窗口方法)
2013-10-23 17:26 802今天herb同 学在twitter上 ... -
不确定图片大小让元素水平垂直居中
2013-10-23 16:53 773<!DOCTYPE html PUBLIC " ...
相关推荐
标题“弹出层居中”涉及的是网页设计中常见的用户界面元素布局问题，特别是使用JavaScript库如jQuery实现的弹出窗口或对话框的居中显示。在这个场景中，"TestJQueryMaskLayer"可能是一个使用jQuery实现的遮罩层插件...
`jQuery弹出层垂直居中效果`是解决这一问题的一种方案，它旨在确保不论弹出层的大小如何，都能在用户屏幕中精确地垂直居中显示。这种效果可以提升用户体验，使得弹出信息更易于阅读和交互。 jQuery是一种广泛使用的...
本篇将探讨如何解决弹出层的居中问题，特别是针对宽度和高度的居中调整。 首先，我们要理解“弹出层居中问题版1”所提及的挑战。在网页设计中，实现弹出层的居中并不总是直截了当的，这可能涉及到CSS布局、窗口大小...
本文将详细探讨如何实现图片在div层的居中，并着重解决垂直居中这一相对复杂的任务，同时考虑浏览器的兼容性问题。 首先，让我们了解基本的CSS布局属性，它们对于实现图片居中至关重要。`margin: auto` 是一种简单...
在网页设计中，"DIV始终居中的半透明弹出层"是一个常见的需求，它涉及到CSS布局、定位以及透明度设置等多个技术点。下面将详细解释这些知识点。 首先，`DIV`是HTML中的一个块级元素，常用于创建网页布局结构。在本...
对于水平和垂直居中，jQuery提供`.css()`方法，配合计算窗口大小和弹出层尺寸，可以轻松实现。 在实际应用中，遮罩层常用于加载提示、警告信息、登录框、注册表单等场景。为了确保跨浏览器兼容性，开发者需要注意...
在网页设计中，`div` 弹出层...通过上述方法，我们可以有效地解决`div`弹出层的定位问题，创建出符合预期且用户体验良好的弹出层。在实际开发中，要结合具体项目需求和浏览器环境灵活运用这些技巧，以达到最佳效果。
top属性则应该设置为滚动条的当前垂直位置（document.body.scrollTop）加上视口高度的一半减去弹出层高度的一半，以保证弹出层垂直居中。 4. JavaScript操作DOM：要实现上述功能，需要用JavaScript动态地操作弹出层...
此外，还需考虑弹出层与后台数据交互，如AJAX加载内容，以及在不同浏览器和设备上的兼容性问题。 综上所述，AlertBox弹出层的实现涉及到HTML、CSS、JavaScript等多种技术，通过巧妙地组合和运用这些技术，可以创造...
`#popup` 设置了居中显示，使用 `margin-left` 来调整水平居中的位置，同时考虑到IE6的兼容性问题，使用了 `expression` 来计算垂直居中的位置。 JavaScript部分通过监听按钮的点击事件来显示遮罩层和弹出层。当...
在给定的文件中，标题和描述提到了"固定位置显示弹出层"，并且特别强调了兼容性问题，主要涉及IE6、IE8和Firefox。这个实现主要依赖于CSS来完成。以下是一些关键知识点： 1. **CSS Position属性**：`position`属性...
'top': (windowHeight - popupHeight) / 2 + scrollTop, // 计算并设置弹出层的垂直居中位置 'left': ($(window).width() - popup.width()) / 2 // 计算并设置弹出层的水平居中位置 }); } centerPopup(); // ...
在实现弹出层或其他需要覆盖在页面内容之上的元素时，必须处理层叠上下文。在CSS中，`z-index`属性可以用来控制元素的堆叠顺序。然而在不同的浏览器中`z-index`的行为可能不完全相同，特别是在IE浏览器中，需要特别...
`使其在页面中水平垂直居中。`display:none;`属性则用来隐藏div层，直到它被需要显示的时候。 3. **可拖拽功能的实现**：用户可以点击div层顶部的标题栏（h2标签）并拖动整个div层。这通过监听`mousedown`事件来...
在实现对话窗口居中时，还需要考虑浏览器兼容性的问题，不同浏览器对于CSS的支持程度不同，可能会影响到对话窗口居中的效果。因此在开发过程中，对不同浏览器的测试是不可或缺的环节。 最后，我们还需要注意代码的...
上下左右居中是指一个元素在水平和垂直方向上都居中的布局方式。这种布局方式常见于登陆页面、弹出框、提示框等场景中。 使用纯CSS实现上下左右居中的代码 下面是使用纯CSS实现上下左右居中的代码： ```css #box...
这种方法适用于多种场景，尤其是需要创建弹出框、对话框、信息提示框等情况。它能够确保这些元素无论在何种屏幕尺寸下都能完美地居中显示，从而提升用户体验。 #### 五、兼容性考虑 值得注意的是，在实际项目中还...
2. **蒙层**：覆盖在主页面上的半透明层，用于防止用户在弹出框显示时与背景内容交互。 3. **容器**：包含模态框内容的区域，通常具有垂直和水平居中的样式，确保无论屏幕大小如何，内容都能居中显示。 4. **标题**...
2. CSS居中：居中是网页设计中常见的需求，包括水平居中和垂直居中。对于行内元素或块级元素，可以使用 `text-align: center;` 来实现水平居中。对于块级元素，可以通过设置左右边距为自动（`margin: auto;`）来实现...