为指定的元素添加遮罩层的示例代码_jquery

复制代码 代码如下:

//遮罩层
$j("<div id='shade'></div>").css({
position:'absolute',
top:0,
left:0,
backgroundColor:"#808080",
opacity:0.1,
zIndex:300

}).height($j(document).height()).width($j(document).width()).hide().appendTo("#bgCover");

bgCover为目标元素的id

时间： 2024-09-24 21:24:28

为指定的元素添加遮罩层的示例代码_jquery的相关文章

为指定的元素添加遮罩层的示例代码

 遮罩在某些情况下还是比较实用的,下面为大家介绍下如何为指定的元素添加遮罩层,感兴趣的朋友可以了解下  代码如下: //遮罩层  $j("<div id='shade'></div>").css({  position:'absolute',  top:0,  left:0,  backgroundColor:"#808080",  opacity:0.1,  zIndex:300    }).height($j(document).heig

兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码_jquery

在页面点击"注册",出现一层有不透明度的黑色遮罩:遮罩层的上方是注册框:此时无法点击页面上除注册框外的其他元素:点击注册框上的"随便逛逛",遮罩层消失. 预览地址: http://jsfiddle.net/p2x3c7df/embedded/result/ 要点: 1.注册框始终水平.垂直居中,包括鼠标滚轮上下滚动页面.缩放页面和调整浏览器窗口大小时 主要由CSS控制,注册框的宽度和高度都已经确定( 620*420px ),首先使用position:fixed来使它

在浏览器窗口上添加遮罩层的方法_基础知识

如何在浏览器窗口上添加一个遮罩层 背景 在web2.0中,页面弹窗是一个很常见的交互方式,这样既可以避免不必要的页面跳转,也可以改进界面的布局和可交互性. 但是,浏览器原生的弹窗函数(alert, confirm, prompt)有着很大的局限性,主要是它们的展现UI一来很不美观,二来也不够灵活,因此,我们经常需要自行定义弹窗函数. 当我们要实现一个模式弹窗时(模式弹窗,即是说出现弹窗时,页面其它地方不可点击),通常的做法是用一个div将整个页面窗口遮挡住. 实现 下面,我们一步步地实现一种较为

jQuery弹出遮罩层实例程序代码

特点:代码量少,简单易用.没有格式限制,随意的代码填充.舍弃了在ie6/7/8下的完全兼容(背景不透明),仅保证信息内容可正常阅读. 缺点:考虑到在触屏手机上的效果,未添加对scroll事件的响应,否则有可能永远看不到弹出的内容(网页的缩放会影响scrollTop值). 相关插件要么功能太强大体积也大,要么是固定的格式需要预设标题.内容.关闭按钮等.非固定样式又非常灵活的一时没找到,就把手头的一个有bug的原生javascript弹出层改动了一下,借助jQuery绕开了麻烦的兼容性问题,正好如今

弹出最简单的模式化遮罩层的js代码

 弹出模式化遮罩层的方法有很多,在本文为大家介绍下使用js实现最简单的模式化遮罩层,具体如下,感兴趣的朋友不要错过 假设我们有一个容器container如下:  代码如下: <style type="text/css">  #container{width:auto;height:auto; overflow:hidden;}  /*这里的overflow:hidden;属性主要是为了设置使超出container的部分自动隐藏,之所以设置这个属性,是为了解决ie8及以下版本

原生js实现半透明遮罩层效果具体代码_javascript技巧

复制代码 代码如下: <!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> <meta http-equiv=&qu

jQuery给元素添加样式的方法详解_jquery

本文实例讲述了jQuery给元素添加样式的方法.分享给大家供大家参考,具体如下: 1.获取和设置样式 $("#tow").attr("class")//获取ID为tow的class属性 $("#two").attr("class","divClass")//设置Id为two的class属性. 2.追加样式 复制代码 代码如下: $("#two").addClass("divCl

jQuery遮罩层效果实例分析_jquery

本文实例分析了jQuery遮罩层效果.分享给大家供大家参考,具体如下: 先来看看示例代码: <!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" xml:l

基于jQuery实现弹出可关闭遮罩提示框实例代码_jquery

jquery CSS3遮罩弹出层动画效果,使用非常简单,就两个标签,里面自定义内容和样式,四种常见效果,懂的朋友还可以修改源代码修改成自己想要的效果 先给大家展示下效果图,如果大家感觉还不错,请参考实现代码. 效果演示 关键代码如下所示: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo