<!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 runat="server">
<title>兼容FF、IE 遮罩</title>
<meta http-equiv="Content-Type" content="text/HTML; charset=utf-8">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function divShow() {
//遮罩层
var sClientWidth = top.document.documentElement.scrollWidth;
var sClientHeight = top.document.documentElement.scrollHeight > top.document.documentElement.clientHeight ? top.document.documentElement.scrollHeight : top.document.documentElement.clientHeight;
$("#addDiv").css({ position: "absolute", display: "block", opacity: "0.2", filter: "alpha(opacity=40)", background: "#000", top: "0px", left: "0px", width: sClientWidth + "px", height: sClientHeight + "px" });
//最上层
$("#divShow").css({ zIndex: "2001", position: "absolute", left: (sClientWidth - 300) / 2 + "px", top: (sClientHeight-200)/2+"px" });
$("#divShow").show();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" onclick="divShow()" value="遮罩"/>
<div style="border: solid 1px; width: 300px; height: 150px; display: none; background-color: #ffffff;"
id="divShow">
<table>
<tr style="height: 30px; background-color: #7ABAFF;" id="t">
<td align="center" style="width: 300px; text-align: left;">
<b><asp:Label ID="lblText" runat="server" Text=""></asp:Label></b>
</td>
</tr>
<tr style="height: 40px;">
<td align="center">
<br />
公司名称:
<asp:TextBox ID="txtName" runat="server"></asp:TextBox><asp:RequiredFieldValidator
ID="RequiredFieldValidator2" runat="server" ErrorMessage="不能为空" ControlToValidate="txtName"></asp:RequiredFieldValidator>
</td>
</tr>
<tr style="height: 30px;">
<td align="center">
<br />
<asp:Button ID="btnSave" runat="server" Text=" 保 存 " />
<input type="button" id="btnReset" value=" 取 消 " />
</td>
</tr>
</table>
</div>
<div id="addDiv" style="display: none;">
</div>
</div>
</form>
</body>
</html>
分享到：
相关推荐
JS遮罩层，可拖动（兼容IE、FF与谷歌）
总的来说，实现一个兼容FF和IE的拖动遮罩层涉及了JavaScript的DOM操作、事件处理、CSS样式设计以及浏览器兼容性处理等多个方面。这需要开发者具备扎实的前端基础，并了解如何利用这些技术来提升用户体验。在实际项目...
描述中提到"兼容IE\FF\google等主流浏览器"，这意味着这个遮罩层解决方案经过优化，可以在Internet Explorer、Firefox和Chrome这些广泛使用的浏览器上正常工作。对于开发者来说，跨浏览器兼容性是至关重要的，因为...
6.是否显示遮罩层 7.遮罩层颜色设置 8.遮罩层透明度设置 9.窗口层叠顺序设置，以实现多级弹出 10.是否显示窗体阴影 11.定时关闭功能 12.自定义窗口大小 13.自定义窗口内容，支持HTML格式和jquery对象格式，不支持...
1. 兼容性问题处理：在标题和描述中提到了兼容IE和Firefox（FF），这可能意味着以下几点： - 使用JavaScript和CSS来实现网页元素的兼容性处理，特别是在老旧浏览器中。 - 在描述中提到的“div层”可能指的是一个在...
此外，还有一个`timeHdl`变量用于处理超时隐藏遮罩层的情况。 ### 六、总结 通过上述技术实现，JavaScript可以灵活地控制页面的交互状态，提供流畅的用户体验。实现页面遮罩封锁的关键在于理解浏览器间的兼容性...
遮罩层可以在IE6、7、8下全屏，但在Firefox和Chrome下无法全屏遮罩。这是因为遮罩层的样式被设置为height:100%，而在有<!DOCTYPE>声明的页面中，这种方法无法与Firefox和Chrome兼容。通过研究网上流传的“luocheng”...
公司WEB项目要求是必须兼容FF3，IE6/7/8。本文所述为IE6下的一个BUG. 项目里面写了一个自己封装的弹出层，原理是先动态添加一个遮罩层，再动态添加一个DIV(Table)层（做弹出层的PNG半透明边框效果），DIV里面动态...
本文将深入探讨如何使用jQuery创建兼容IE6及火狐等主流浏览器的弹出层，并分享相关的实现技巧。 1. **jQuery弹出层的基本概念** jQuery弹出层，通常被称为模态对话框或浮动窗口，是在网页主界面之上显示一个半透明...
2 兼容 IE7+ ff google 3 功能： 1）弹层遮罩 2）弹出层位置 top/parent 3）弹出层大小 4）是否可拖动 5）是否最大/小化 6）是否可关闭 7）确认、取消提示框 8）弹出层标题自定义 9）弹出层嵌入页面 10）...
3. **透明度处理**：在IE浏览器下，使用`filter: alpha(opacity=0)`为遮罩层设置透明度，但此属性已被废弃，现代浏览器更推荐使用CSS3的`opacity`属性。 4. **HTML内容动态插入**：在`alertFram`中动态生成HTML，...
此脚本通过修改HTML元素的样式属性来显示和隐藏一个背景遮罩层（`divBackground`）以及一个显示层（`divShow`）。此外，还提供了一些额外的功能，比如定时关闭弹窗、动态调整位置等。 #### 二、关键函数及代码段...