`
highfly-s
  • 浏览: 100866 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

解决弹出层水平垂直居中 兼容问题

带有滚动条的水平垂直居中 
阅读更多

<!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>

分享到：
| 三谈iframe 自适应高度
评论
发表评论

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

相关推荐

    弹出层居中

    标题“弹出层居中”涉及的是网页设计中常见的用户界面元素布局问题，特别是使用JavaScript库如jQuery实现的弹出窗口或对话框的居中显示。在这个场景中，"TestJQueryMaskLayer"可能是一个使用jQuery实现的遮罩层插件...

    jQuery弹出层垂直居中效果.zip

    `jQuery弹出层垂直居中效果`是解决这一问题的一种方案，它旨在确保不论弹出层的大小如何，都能在用户屏幕中精确地垂直居中显示。这种效果可以提升用户体验，使得弹出信息更易于阅读和交互。 jQuery是一种广泛使用的...

    弹出层居中问题版1

    本篇将探讨如何解决弹出层的居中问题，特别是针对宽度和高度的居中调整。 首先，我们要理解“弹出层居中问题版1”所提及的挑战。在网页设计中，实现弹出层的居中并不总是直截了当的，这可能涉及到CSS布局、窗口大小...

    图片的水平垂直居中

    本文将详细探讨如何实现图片在div层的居中，并着重解决垂直居中这一相对复杂的任务，同时考虑浏览器的兼容性问题。 首先，让我们了解基本的CSS布局属性，它们对于实现图片居中至关重要。`margin: auto` 是一种简单...

    DIV始终居中的半透明弹出层.rar

    在网页设计中，"DIV始终居中的半透明弹出层"是一个常见的需求，它涉及到CSS布局、定位以及透明度设置等多个技术点。下面将详细解释这些知识点。 首先，`DIV`是HTML中的一个块级元素，常用于创建网页布局结构。在本...

    jquery js css弹出居中的遮罩层

    对于水平和垂直居中，jQuery提供`.css()`方法，配合计算窗口大小和弹出层尺寸，可以轻松实现。 在实际应用中，遮罩层常用于加载提示、警告信息、登录框、注册表单等场景。为了确保跨浏览器兼容性，开发者需要注意...

    div弹出层 定位问题的 处理

    在网页设计中，`div` 弹出层...通过上述方法，我们可以有效地解决`div`弹出层的定位问题，创建出符合预期且用户体验良好的弹出层。在实际开发中，要结合具体项目需求和浏览器环境灵活运用这些技巧，以达到最佳效果。

    JS弹出层单纯的绝对定位居中示例代码

    top属性则应该设置为滚动条的当前垂直位置（document.body.scrollTop）加上视口高度的一半减去弹出层高度的一半，以保证弹出层垂直居中。 4. JavaScript操作DOM：要实现上述功能，需要用JavaScript动态地操作弹出层...

    AlertBox 弹出层 实例（多种）

    此外，还需考虑弹出层与后台数据交互，如AJAX加载内容，以及在不同浏览器和设备上的兼容性问题。 综上所述，AlertBox弹出层的实现涉及到HTML、CSS、JavaScript等多种技术，通过巧妙地组合和运用这些技术，可以创造...

    js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)

    `#popup` 设置了居中显示，使用 `margin-left` 来调整水平居中的位置，同时考虑到IE6的兼容性问题，使用了 `expression` 来计算垂直居中的位置。 JavaScript部分通过监听按钮的点击事件来显示遮罩层和弹出层。当...

    固定位置显示弹出层(兼容IE6,IE8,FF)

    在给定的文件中，标题和描述提到了"固定位置显示弹出层"，并且特别强调了兼容性问题，主要涉及IE6、IE8和Firefox。这个实现主要依赖于CSS来完成。以下是一些关键知识点： 1. **CSS Position属性**：`position`属性...

    jquery控制弹层随页面滚动.zip

    'top': (windowHeight - popupHeight) / 2 + scrollTop, // 计算并设置弹出层的垂直居中位置 'left': ($(window).width() - popup.width()) / 2 // 计算并设置弹出层的水平居中位置 }); } centerPopup(); // ...

    完全纯css实现div自适应居中兼容IE7 Chrome FireFox

    在实现弹出层或其他需要覆盖在页面内容之上的元素时，必须处理层叠上下文。在CSS中，`z-index`属性可以用来控制元素的堆叠顺序。然而在不同的浏览器中`z-index`的行为可能不完全相同，特别是在IE浏览器中，需要特别...

    JS弹出可拖拽可关闭的div层完整实例

    `使其在页面中水平垂直居中。`display:none;`属性则用来隐藏div层，直到它被需要显示的时候。 3. **可拖拽功能的实现**：用户可以点击div层顶部的标题栏（h2标签）并拖动整个div层。这通过监听`mousedown`事件来...

    js弹出的对话窗口永远保持居中显示

    在实现对话窗口居中时，还需要考虑浏览器兼容性的问题，不同浏览器对于CSS的支持程度不同，可能会影响到对话窗口居中的效果。因此在开发过程中，对不同浏览器的测试是不可或缺的环节。 最后，我们还需要注意代码的...

    纯CSS实现上下左右都居中的代码

    上下左右居中是指一个元素在水平和垂直方向上都居中的布局方式。这种布局方式常见于登陆页面、弹出框、提示框等场景中。 使用纯CSS实现上下左右居中的代码 下面是使用纯CSS实现上下左右居中的代码： ```css #box...

    div完美自适应动态上下左右居中

    这种方法适用于多种场景，尤其是需要创建弹出框、对话框、信息提示框等情况。它能够确保这些元素无论在何种屏幕尺寸下都能完美地居中显示，从而提升用户体验。 #### 五、兼容性考虑 值得注意的是，在实际项目中还...

    前端之好看的通用弹出框

    2. **蒙层**：覆盖在主页面上的半透明层，用于防止用户在弹出框显示时与背景内容交互。 3. **容器**：包含模态框内容的区域，通常具有垂直和水平居中的样式，确保无论屏幕大小如何，内容都能居中显示。 4. **标题**...

    CSS3图形处理与动画.pdf

    2. CSS居中：居中是网页设计中常见的需求，包括水平居中和垂直居中。对于行内元素或块级元素，可以使用 `text-align: center;` 来实现水平居中。对于块级元素，可以通过设置左右边距为自动（`margin: auto;`）来实现...

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