兼容IE6的遮罩层
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 2014年7月10日 18:06:35 星期四
兼容IE6的遮罩层，利用“* Html”这个Hack，设置IE6使用position:absolute;和 expression 来模拟fixed的效果，另外设置background:url(*)防止抖动。
遮罩层Css代码：
.overlay{
position: fixed;
z-index: 100000; /*按需设置*/
width: 100%;
height: 100%;
top: 0;
left: 0;
filter: alpha(opacity=50);
opacity: 0.5;
overflow: hidden;
background-color: #000;
}
* html { background:url(*) fixed; }
* html body { margin:0; height:100%; }
* html .overlay{
position: absolute;
left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth);
top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight);
}
屏幕居中代码：
.cen{
position:absolute;
top:50%;
left:50%;
width:200px;
height:100px;
margin-top:-50px;
margin-left:-100px;
border:1px solid red;
line-height:30px;
font-size:16px;
text-align:center;
color: red;
}
完整示例代码：
<!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>
<title>DIV CSS遮罩层 兼容IE6</title>
<script language="javascript" type="text/javascript">
function showdiv() {
document.getElementById("show").style.display ="block";
}
function hidediv() {
document.getElementById("show").style.display ='none';
}
</script>
<style type="text/css">
.overlay{
position: fixed;
z-index: 100000; /*按需设置*/
width: 100%;
height: 100%;
top: 0;
left: 0;
filter: alpha(opacity=50);
opacity: 0.5;
overflow: hidden;
background-color: #000;
}
* html { background:url(*) fixed; }
* html body { margin:0; height:100%; }
* html .overlay{
position: absolute;
left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth);
top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight);
}
.cen{
position:absolute;
top:50%;
left:50%;
width:200px;
height:100px;
margin-top:-50px;
margin-left:-100px;
border:1px solid red;
line-height:30px;
font-size:16px;
text-align:center;
color: red;
}
</style>
</head>
<body>
<input id="btnshow" type="button" value="Show" onclick="showdiv();"/>
<div id="show" class="overlay">
<div class="cen">
是否垂直居中？
<input id="btnclose" type="button" value="Close" onclick="hidediv();"/>
</div>
</div>
</body>
</html>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 2014年7月10日 18:06:35 星期四
相关推荐
实现弹出网页遮罩层，可兼容IE6/IE7/IE+++等； 缩放浏览器时，内容狂始终居中； 有点小bug，在IE6下，遮罩层颜色没透明，屎黑色，等我有空完善下。
JS遮罩层，可拖动（兼容IE、FF与谷歌）
本文将详细介绍如何使用JS实现这种遮罩层效果，并探讨其在IE、Firefox以及jQuery环境下的应用。 首先，让我们理解遮罩层的基本原理。遮罩层通常由两个主要部分组成：遮罩元素和目标元素。遮罩元素是覆盖在页面上的...
这个小插件的核心功能是创建一个可移动、可关闭的弹出层，它在设计时特别考虑了对老版本Internet Explorer（IE6、IE7和IE8）的兼容性。 jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画...
"ie firefox做了一个遮罩层"这个标题表明我们将讨论如何在Internet Explorer（IE）和Firefox这两个主流浏览器上实现遮罩层的功能。 在Internet Explorer和Firefox中创建一个兼容的遮罩层涉及到CSS和JavaScript的...
这是多么能让千万只草原上的马儿奔腾的要求~~~ 先实现一个比较简单的功能： 需求：网页遮罩层/弹出层，兼容IE6 幸好本屌丝以前聪明收集了个js的版本，so，自己改写成了jQuery插件形式的，方便以后使用。 屁话不多放...
6. **优化与兼容性**：在实现这一效果时，要考虑不同浏览器的兼容性问题，尤其是对于老旧版本的IE。此外，通过响应式设计确保在不同设备和屏幕尺寸上都能正常工作。 7. **用户体验**：设计时应考虑用户体验，确保...
知识点6：可编辑遮罩层 在实现遮罩层时，可以使用javascript来实现可编辑遮罩层的功能。例如，可以使用`contenteditable`属性来设置遮罩层的可编辑性，然后使用javascript来处理用户的编辑操作。 知识点7：兼容性...
6. **动画效果**：为了增加用户体验，遮罩层可能包含平滑的过渡和动画效果，如淡入淡出、滑动等。 7. **可定制性**：允许开发者自定义遮罩层的颜色、大小、形状、动画等属性，以符合项目的设计风格。 8. **模块化*...
在创建兼容IE6、7、8以及Firefox等主流浏览器的网页模式对话框时，开发者需要考虑不同浏览器之间的差异和兼容性问题。 首先，让我们了解一些基本概念。在HTML中，最原始的对话框是`<dialog>`元素，但这个元素在旧版...
"兼容ie、谷歌、火狐等浏览器"则强调了跨浏览器的兼容性问题。由于不同浏览器对HTML、CSS和JavaScript的解析和支持程度存在差异，开发者需要确保页面在主流浏览器如Internet Explorer、Google Chrome和Firefox等上都...
本篇文章将详细介绍如何使用CSS和div元素来创建一个兼容IE6到IE9以及Firefox的遮罩层。 首先，我们需要在HTML中定义两个div元素。一个是`#black_overlay`，它作为遮罩层，覆盖整个页面，通常具有半透明黑色背景；另...
5. **兼容IE、谷歌、火狐等浏览器**：这表示开发人员已经考虑到不同浏览器之间的兼容性问题，确保在主流浏览器（如Internet Explorer、Google Chrome和Firefox）上的正常运行。因为不同的浏览器对某些HTML、CSS和...
描述中提到"兼容IE\FF\google等主流浏览器"，这意味着这个遮罩层解决方案经过优化，可以在Internet Explorer、Firefox和Chrome这些广泛使用的浏览器上正常工作。对于开发者来说，跨浏览器兼容性是至关重要的，因为...
在JavaScript编程中，创建一个兼容Firefox（FF）和Internet Explorer（IE）的遮罩层是一项常见的需求，特别是在构建交互式Web应用或者需要弹出框、提示信息时。标题中的"超级爽的 js 遮罩层 谦容 FF IE 支持拖动...
在网页设计中，加载动画（loading）和遮罩层是提升用户体验的重要元素。"原生CSS的loading遮罩层效果"是指使用纯CSS技术来创建一个在页面内容加载时显示的加载指示器，并配合遮罩层，以提供更好的交互体验。这种技术...
标题中的“JS遮罩层效果 兼容ie firefox jQuery遮罩层”指的是使用JavaScript和jQuery实现的一种跨浏览器的遮罩层功能，它能在Internet Explorer（IE）和Firefox等不同的浏览器上正常工作。遮罩层是一种网页设计技术...
当用户点击某个按钮时，一个半透明的遮罩层会覆盖整个页面，突出显示弹出的窗口或信息，而其他部分则变得不可操作。这种技术在提示信息、表单验证、模态对话框或者图片预览等场景中非常常见。 首先，`div` 是HTML中...