`

JQuery 遮罩层

 
阅读更多

1.样式如下设置：

 

<style type="text/css">
	.mask {  
            position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
            z-index: 1002; left: 0px;
            opacity:0.5; -moz-opacity:0.5;
        }
</style>
 

   其中： opacity:0.5;适用于IE， -moz-opacit:0.5;适用于火狐；你只需要都加上，便可以火狐和IE下都可以使用。

 

2.指定层的高度、和宽度。

 

<script type="text/javascript">
	//兼容火狐、IE8
	function showMask(){
		$("#mask").css("height",$(document).height());
		$("#mask").css("width",$(document).width());
		$("#mask").show();
	}
</script>

 

3.在<body>中加入如下代码，然后就可以看效果了：

 

 

<div id="mask" class="mask"></div>
<a href="javascript:;" onclick="showMask()" >点我显示遮罩层</a><br />
 

 

分享到：
| JavaServerWrapper做成服务
评论
2 楼 在世界的中心呼喚愛 2014-05-05  
spp_1987 写道
这个遮挡层不错 ， 但是为什么取消这个遮挡层的时候 ，再次打开 ，下面全是没有的了。

调试成功？
1 楼 spp_1987 2012-09-11  
这个遮挡层不错 ， 但是为什么取消这个遮挡层的时候 ，再次打开 ，下面全是没有的了。
发表评论

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

相关推荐

    jquery遮罩层

    首先，要实现一个基本的jQuery遮罩层，我们需要引入jQuery库。如果你的项目中还没有包含jQuery，可以在HTML文件头部添加以下链接来引入官方CDN上的最新版本： ```html &lt;script src="https://code.jquery....

    jquery 遮罩层

    本示例中的“jquery 遮罩层”是指利用jQuery来实现一种交互效果：当鼠标悬停在图片上时，图片的右下角会出现一个白色的三角形遮罩层，同时显示图片的标题内容。这个效果通常用于提高用户体验，让用户能够快速了解...

    jQuery遮罩层在线QQ客服代码

    首先，我们来了解jQuery遮罩层的基本概念。遮罩层是一种常见的网页设计元素，通常用于创建半透明的覆盖层，用于突出显示特定内容或加载弹出窗口。通过使用jQuery，我们可以轻松地动态添加、修改和删除DOM元素，实现...

    jquery 遮罩层 插件

    非常好用的一款jquery遮罩层插件，网页制作必备。

    jQuery遮罩层在线QQ客服代码.zip

    《jQuery遮罩层在线QQ客服代码详解》 在网页设计中，交互性和用户体验是至关重要的因素，而在线客服系统则是提升用户体验的有效手段之一。本文将深入解析“jQuery遮罩层在线QQ客服代码”，帮助开发者理解并掌握这一...

    JQUERY遮罩层效果

    通过这种方式，我们可以轻松地在网页中实现jQuery遮罩层效果，提供更好的用户体验，而无需刷新整个页面。这仅仅是jQuery实现遮罩层的基本用法，实际开发中可以根据需求进行定制和扩展，如添加动画效果、自适应布局...

    JQuery遮罩层登录界面源码

    JQuery遮罩层登录界面源码 测试浏览器：IE8、FF3.6.8、Google Chrome （IE8中弹出登录层后会出现竖拉条，其他两种没有出现，那个竖拉条可以在JS中通过修改数值让其不出现，但是下面会出现白边） 点击登录显示登录...

    Jquery遮罩层组件

    **jQuery 遮罩层组件详解** 在网页开发中，遮罩层（Mask Layer）是一种常见且实用的设计元素，用于创建弹出式窗口、加载指示器或者提示信息，以达到吸引用户注意力或阻断背景交互的效果。jQuery 道具库提供了一款名...

    简单容易的jquery遮罩层

    jQuery遮罩层（jQuery Mask）是jQuery的一个常见应用，用于创建覆盖整个网页或部分区域的透明层，通常用于加载提示、弹窗提示、用户交互等场景。下面我们将深入探讨jQuery遮罩层的实现原理、使用方法及其相关的知识...

    JQUERY 遮罩层

    在本话题中，我们将探讨“JQUERY 遮罩层”的概念，这是一种创建弹出对话框或加载指示器的常用技术。遮罩层通常用于在页面上覆盖一层半透明的背景，使用户专注于特定区域，如表单提交、警告信息或内容加载。 首先，...

    jquery遮罩层插件mloading

    **jQuery 遮罩层插件 mloading** 在网页开发中，为了提供更好的用户体验，我们经常需要在数据加载或处理过程中显示一个遮罩层，让用户知道后台正在执行操作。jQuery 插件 `mloading` 正是为此目的设计的。这个插件...

    非常简单的jquery遮罩层鼠标点击按钮放大展开动画弹出框

    在本示例中，“非常简单的jquery遮罩层鼠标点击按钮放大展开动画弹出框”是一个利用jQuery实现的功能，主要用于增强用户交互体验。下面将详细介绍这个功能的实现原理和相关知识点。 首先，jQuery遮罩层（Mask Layer...

    JQuery遮罩层登录界面 2.0.rar

    一、源码描述 这是JQuery遮罩层登录界面源码的更新版本，这次主要添加了数据库，方便大家使用，可以用作学习交流，感兴趣的可以下载研究写一下。二、功能介绍 点击登录显示登录窗口（层） ，同时用一个灰色透明层...

    JQuery 遮罩层

    首先，我们来看`fakeLoader.js-master`这个文件名，这很可能是一个关于jQuery遮罩层的开源项目。`fakeLoader.js`是核心JavaScript文件，`master`则可能表示这是项目的主要分支或者最新版本。通常，这个压缩包会包含...

    jQuery 遮罩层

    **jQuery 遮罩层详解** 在Web开发中，遮罩层（Mask Layer）是一种常见的交互元素，用于在用户与页面交互时提供一种半透明覆盖，通常用于加载提示、弹窗确认、模态对话框等场景。jQuery，作为一款广泛使用的...

    jQuery遮罩层代码，点击链接弹出浮动层效果.rar

    jQuery遮罩层代码，点击链接弹出浮动层效果，实例中演示弹出了宽度为700PX/350PX/500PX的浮动窗口，有了实例，大家用起来就得心应手了，代码中的jQuery，引自google官方的托管库代码。

    jQuery遮罩层登录界面效果，AJAX登录验证，附源码下载.rar

    本项目“jQuery遮罩层登录界面效果，AJAX登录验证”是基于jQuery实现的一个登录功能，其核心特点在于创建了一个遮罩层效果以及利用AJAX进行后台验证，提供用户友好的交互体验。 首先，遮罩层是一种常见的网页设计...

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