<!doctype html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
html{_background:url(about:blank);} /* 阻止闪动 in IE6 , 把空文件换成about:blank , 减少请求 */
body{background:#fff; font: 12px/1.5 Tahoma,Geneva, \5b8b\4f53, sans-serif; height:100%;}
.wrap{height:980px; padding-top:20px;text-align:center;}
p{font-size:14px;text-align:center;line-height:24px;}
/** 遮罩层 **/
#masklayer{
background:#000;
display:none;
filter:alpha(opacity = 50);
opacity:0.5;
top:0;
left:0;
height:100%;
width:100%;
z-index:999;
position:fixed;
_position:absolute;
_left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth);
_top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight);
}
/** 弹出层 **/
#popup{
display:none;
width:300px;
z-index:1000;
left:50%;
top:50%;
position:fixed!important;
margin-left:-150px !important;
_position:absolute;
_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*/
}
.content{background:#f3f3f3;border:1px solid #999;}
.content h3{background:#a0a0a0;color:#fff;font-size:14px;height:32px;line-height:32px; padding-left:5px;}
#clickbtn{margin-top:20px;}
</style>
</head>
<body>
<div class="wrap">
<p>
我是正文我是正文我是正文我是正文我是正文我是正文我是正文
<br />
我是正文我是正文我是正文我是正文我是正文我是正文我是正文
<br />
我是正文我是正文我是正文我是正文我是正文我是正文我是正文
<br />
我是正文我是正文我是正文我是正文我是正文我是正文我是正文
<br />
我是正文我是正文我是正文我是正文我是正文我是正文我是正文
</p>
<input type="button" id="clickbtn" value="clike me" />
</div>
<div id="masklayer"></div>
<div id="popup">
<div class="content">
<h3>我是弹出层 有没有居中？</h3>
<p>居中居中居中居中居中居中</p>
<p>居中居中居中居中居中</p>
<p>居中居中居中居中</p>
<p>居中居中居中</p>
</div>
</div>
<script type="text/javascript">
(function(masklayer){
var clickbtn = document.getElementById('clickbtn');
clickbtn.onclick = function(){
var popup = document.getElementById('popup');
masklayer.style.display='block';
popup.style.display ='block';
var h = popup.clientHeight;
with(popup.style){
marginTop = -h/2+'px';
}
}
})(document.getElementById('masklayer'))
</script>
</body>
</html>
分享到：
相关推荐
在实际开发中，还可以利用CSS3的 `transform` 属性配合 `translateX` 和 `translateY` 来实现更高效、更平滑的垂直居中效果，尤其是在现代浏览器中，这种方法性能更优且代码简洁。 总结，jQuery实现弹出层垂直居中...
在网页设计中，创建一个能够跨浏览器工作的居中弹框是一项常见的需求。"适用于ie，chrome , firefox等多种浏览器， 主要针对功能比较多的弹框，纯文本满足不了的情况"这个描述意味着我们需要构建一个多功能且兼容性...
8. 响应式设计：随着移动设备的普及，弹出层的居中还应考虑到响应式设计，即在不同屏幕尺寸下保持良好的显示效果。 9. 键盘和辅助技术友好：为了提升无障碍性，弹出层应该能够通过键盘导航，并且能够被屏幕阅读器等...
在网页开发中，经常需要实现一些层（Div）在浏览器中居中显示的效果，这种效果在弹窗对话框或提示信息中尤为常见。要实现这样的效果，我们可以通过使用jQuery这个快速、小巧且功能丰富的JavaScript库来完成。本篇...
在网页设计中，将一个元素水平垂直居中是常见的需求，尤其在响应式布局和动态内容展示中尤为重要。本文将详细讲解如何通过CSS实现这样...如果父容器大小不固定，可以考虑使用Flexbox或Grid布局来实现更灵活的居中效果。
Panel控件可以作为弹出层的内容容器，而ModalPopupExtender控件则提供了一种方便的方式来弹出和关闭Panel，并且可以轻松实现居中效果。 4. **jQuery**：虽然JavaScript已经足够强大，但jQuery库的引入可以使代码...
在网页设计中，浮动层居中的对话框效果是一种常见的交互设计元素，用于显示重要的提示信息、用户确认操作或展示详细内容。本示例主要探讨如何使用HTML和CSS技术实现这样的效果。下面我们将深入讨论相关知识点。 ...
不同的浏览器对 CSS 的解析和渲染方式存在差异，从而导致相同的 CSS 代码在不同浏览器中显示效果不同。本文将总结常见的 CSS 兼容问题和解决方法。 一、CSS 样式的差异 * 字串 8ul 和 ol 的默认 padding 值不同，...
在这个"jQuery弹出层垂直居中效果.zip"文件中，我们很可能会找到一个示例，展示如何利用jQuery来实现弹出层的垂直居中。 首先，我们需要理解CSS在垂直居中布局中的角色。传统的CSS布局方法如表格或绝对定位可以实现...
在网页设计中，"DIV+CSS 图片垂直居中效果"是一个常见的布局需求，它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述： 1. **基础概念** - **DIV**：HTML中的`<div>`元素是一...
这种方法利用绝对定位实现居中，将元素向左移动其自身宽度的一半，以达到视觉上的居中效果。代码如下： ```css div { position: relative; left: 50%; margin-left: -480px; width: 960px; } ``` 这种方法灵活...
功能基本上已经做完了，就是有个小问题，当窗口飞出来过后，如果再缩小浏览器的话，飞出的那个层不会左右再居中了，就目前淘宝上面那个效果也是没有解决这个问题的，因为飞的时候是把距左的距离已经定死了，飞过了...
在网页设计中，有时我们需要创建一个遮罩层和居中弹出层，以便在用户与页面交互时显示重要信息或提示。这篇文档介绍了一个使用JavaScript（JS）和Cascading Style Sheets（CSS）来实现这样的功能的方法。这个实现的...
important`在某些浏览器（比如旧版的Firefox）中被用来确保特定的样式规则优先级更高，而在Chrome中可能无法达到预期效果。 总结起来，解决Chrome浏览器中CSS居中兼容性问题的关键在于确保使用标准的、跨浏览器兼容...
`position:fixed`确保它相对于浏览器窗口定位，`top:50%`和`left:50%`将其放置在屏幕中心，`transform:translate(-50%, -50%)`则进行微调，使其在视觉上完全居中。 **div屏幕居中** 要使div在屏幕中居中，可以结合...
在实际项目中，我们可能还需要考虑其他因素，比如弹出层的z-index（确保它位于其他元素之上），以及可能存在的动画效果。文件"修改demo"可能是实现这一功能的示例代码，你可以查看并学习其中的实现细节。 总的来说...
在网页设计中，"DIV始终居中的半透明弹出层"是一个常见的需求，它涉及到CSS布局、定位以及透明度...在实际项目中，可能还需要考虑响应式设计、动画效果以及浏览器兼容性等问题，以确保在各种设备和环境中都能良好运行。