<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>协同工作平台后台登陆</title>
<script src="res/common/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(".bg").width($("#overlay").width());
$('.bg').height($("#overlay").height());
//获取被遮罩层的定位,以实现遮罩层对被 遮罩层的完美"覆盖"
[color=red]var position = $("#overlay").position();[/color] $('.bg').css('left',position.left);
$('.bg').css('top',position.top);
});
</script>
<style type="text/css">
#overlay {
top: 0px;
left: 0px;
z-index: 100; /* 此处的图层要大于页面 */
}
.bg {
[color=blue]filter: alpha(opacity = 150); /* IE的透明度 */
opacity: 0.5; /* 透明度 */[/color] z-index: 200; /* 此处的图层要大于页面 */
-moz-opacity:0.5;/*添上后兼容性会更好*/
-khtml-opacity:0.5;/*添上后兼容性会更好*/
[color=blue]position:absolute;/*必须是这种定位*/
background-color:#000; [/color]}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="overlay" >来遮罩我…………………………</div>
<div class="bg"></div>
</body>
</html>
以上代码在ff gg IE8下面测试通过
分享到:
相关推荐
总的来说,“jQuery+NET遮罩层登录框”涉及的知识点包括:jQuery的选择器与DOM操作、CSS布局与样式设计、jQuery事件处理和动画、ASP.NET Web API的创建与数据交互以及客户端验证。理解并掌握这些技术,可以帮助...
在这个"CSS+DIV+JQuery源码实现遮罩效果"的资源中,我们可以学习如何利用这三种技术来创建一个功能完备且视觉效果良好的遮罩层。 首先,CSS(Cascading Style Sheets)是网页样式表语言,主要用于定义HTML或XML...
本教程将详细介绍如何使用jQuery和CSS创建一个简单、可自定义的遮罩层,尤其适用于移动端应用。 首先,我们需要理解jQuery和CSS的基本概念。jQuery是一个高效、简洁的JavaScript库,它简化了HTML文档遍历、事件处理...
除了使用css和javascript来实现遮罩层外,还有其他实现方法,例如使用jQuery插件、使用HTML5的canvas元素等。这些方法都可以实现遮罩层的效果,但是在选择实现方法时,需要考虑到实际情况和需求。
本案例由卫班科技提供,展示了如何使用HTML5和CSS3来实现一个遮罩层功能,这是一个在网页中常见且实用的设计元素。遮罩层通常用于弹出窗口、提示信息或者加载动画,它能在不影响页面主要内容的情况下,向用户展示...
下面将详细介绍jQuery遮罩层的实现原理、相关CSS技术和实际应用。 首先,jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。在创建遮罩层时,我们主要利用jQuery的DOM操作...
4. **CSS3形状和边框**:在遮罩层的形状过渡中,可能涉及到CSS3的形状属性,如`border-radius`创建圆角,`clip-path`或`mask`定义复杂形状。这些属性可以与过渡效果结合,实现形状的动态变化。 5. **响应式设计**:...
首先,我们来了解jQuery遮罩层的基本概念。遮罩层是一种常见的网页设计元素,通常用于创建半透明的覆盖层,用于突出显示特定内容或加载弹出窗口。通过使用jQuery,我们可以轻松地动态添加、修改和删除DOM元素,实现...
总的来说,“jQuery遮罩层在线QQ客服代码”是一个综合运用jQuery、CSS和HTML技术的实例,展示了如何通过JavaScript库实现动态交互和视觉效果。掌握这一技术,不仅可以提升网站的专业形象,还能有效提高用户满意度,...
总结起来,这个“jquery 遮罩层”的实现涉及HTML、CSS和JavaScript(jQuery)三个部分。HTML提供图片和数据,CSS定义遮罩层和三角形的样式,而JavaScript处理交互逻辑,实现悬停时的动态效果。这种技术在网页设计中...
**jQuery 遮罩层组件详解** 在网页开发中,遮罩层(Mask Layer)是一种常见且实用的设计元素,用于创建弹出式窗口、加载指示器或者提示信息,以达到吸引用户注意力或阻断背景交互的效果。jQuery 道具库提供了一款名...
在这个“jQuery, CSS实现的遮罩层消息显示”示例中,我们将深入探讨如何利用这两种技术来创建一个具有背景变暗效果、弹出层以及滑动动画的遮罩层。 首先,CSS(Cascading Style Sheets)是用于控制网页布局和样式的...
综上所述,这个"js+css点击弹出遮罩层图片放大展示demo"通过结合JavaScript和CSS的力量,实现了优雅的图片放大查看功能,为用户带来了更直观、更具沉浸感的浏览体验。在实际项目中,可以根据需求进行调整和优化,以...
jQuery遮罩层(jQuery Mask)是jQuery的一个常见应用,用于创建覆盖整个网页或部分区域的透明层,通常用于加载提示、弹窗提示、用户交互等场景。下面我们将深入探讨jQuery遮罩层的实现原理、使用方法及其相关的知识...
**jQuery Loading遮罩层插件——busy-load** 在网页开发中,当用户触发需要等待的操作时,如数据加载或页面跳转,为了提供良好的用户体验,通常会使用loading动画来提示用户系统正在处理请求。"busy-load"就是这样...
在这个“jQuery+CSS写的打开和关闭遮罩层”主题中,我们将深入探讨如何使用这两种技术来实现这一功能。 首先,CSS(Cascading Style Sheets)是网页样式控制的语言,它允许我们定义元素的外观、布局和结构。在创建...
在本话题中,我们将探讨“JQUERY 遮罩层”的概念,这是一种创建弹出对话框或加载指示器的常用技术。遮罩层通常用于在页面上覆盖一层半透明的背景,使用户专注于特定区域,如表单提交、警告信息或内容加载。 首先,...
总的来说,无论是纯JS+CSS还是jQuery+CSS,创建居中显示的遮罩层都需要理解JavaScript的基本语法和DOM操作,熟悉CSS的布局技巧,以及如何处理浏览器兼容性问题。这个压缩包提供的示例可以帮助开发者快速实现这一功能...