jq兼容各个浏览器的遮罩层效果，有关闭按钮（非常强大的）

最新推荐文章于 2023-01-07 11:11:48 发布
最新推荐文章于 2023-01-07 11:11:48 发布
阅读量357 收藏
点赞数
分类专栏： 页面特效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq719365064/article/details/52925360
版权
这个示例展示了如何使用jQuery创建一个兼容各浏览器的遮罩层效果，包括一个可关闭的对话框。通过点击链接，会显示红色背景的对话框，并在页面上显示一个灰色的全屏遮罩层。用户可以点击关闭按钮来隐藏对话框和遮罩层。
摘要由CSDN通过智能技术生成
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>史上最精简，最强大的JS遮罩层效果，支持ie firefox jQuery遮罩层</title>  
  6. <script type="text/javascript" src="../../homepage/js/jquery-1.4.2.js"></script>  
  7. <script type="text/javascript">  
  8.     var clientH = null;  
  9.     var jq = jQuery.noConflict();  
  10.     var h=null;  
  11.         window.onload = function zhezhao(){  
  12.             clientH = document.documentElement.clientHeight;  
  13.             if(isSafari=navigator.userAgent.indexOf("Safari")>0){  
  14.                 h = document.body;  
  15.             }else{  
  16.                 h =document.documentElement;  
  17.             }  
  18.         }  
  19.         function showBg(elem){  
  20.             var w = (document.documentElement.clientWidth/2)-(jq("#"+ elem).width()/2);  
  21.             jq("#"+ elem).css("top",(h.scrollTop+ (clientH/2)-(jq("#"+ elem).height()/2))+"px");  
  22.             jq("#"+ elem).css("left",w+"px");  
  23.             jq("#fullbg").css("display","block");  
  24.             jq("#"+ elem).css("display",
最低0.47元/天 解锁文章
不懂love
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用css实现遮罩层 jquery实现点击任意位置关闭遮罩
yangruini_love的博客
06-29 1081
首先先看看完整的html，css可以根据实际情况进行更改。使用了一个鼠标悬停效果，默认颜色透明度为0.3，当鼠标移上去后，透明度为1。 接下来介绍的是俩种方式关闭遮罩方法一：点击×关闭遮罩 方法二：点击任意位置关闭遮罩.........
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
10-21
- 透明度设置为0.5，实现半透明效果，兼容多种浏览器 对话框`#DialogDiv`、`#DialogDiv2`和`#DialogDiv3`的样式包括： - 绝对定位，宽度固定，居中显示，边框1px，背景色白色，`z-index`值为100，确保对话框位于...
jquery弹出可关闭遮罩提示框
weixin_34297300的博客
07-16 149
jquery CSS3遮罩弹出层动画效果，使用非常简单，就两个标签，里面自定义内容和样式，四种常见效果，懂的朋友还可以修改源代码修改成自己想要的效果 效果展示 http://hovertree.com/texiao/jquery/85/代码如下： &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equ...
遮罩层效果 兼容ie firefox jQuery遮罩层 弹出层带关闭按钮
acongshijia的专栏
03-13 3767
今天写了一个jQuery遮罩层的效果，当然网上也有很多类似的效果及插件，但是大多数看上去很复杂，我只要最简单最实用的，最少的代码达到最多的效果，欢迎各位同志围观。。 遮罩层效果 兼容ie firefox jQuery遮罩层 .mask{ display:none; position:absolute;top:0;left:0;width:100%;
JQuery 操作按钮遮罩（删除）
weixin_30731287的博客
11-11 132
HTML代码： <input type="button" class="delete_btn" value="删 除" /> <div class="shade"></div> <div class="warning"> 　　<div class="warn_titel">警 告&lt...
jquery js css弹出居中的遮罩层
03-01
总的来说，无论是纯JS+CSS还是jQuery+CSS，创建居中显示的遮罩层都需要理解JavaScript的基本语法和DOM操作，熟悉CSS的布局技巧，以及如何处理浏览器兼容性问题。这个压缩包提供的示例可以帮助开发者快速实现这一功能...
兼容FF，IE等浏览器的弹出层教程
05-16
6.是否显示遮罩层 7.遮罩层颜色设置 8.遮罩层透明度设置 9.窗口层叠顺序设置，以实现多级弹出 10.是否显示窗体阴影 11.定时关闭功能 12.自定义窗口大小 13.自定义窗口内容，支持HTML格式和jquery对象格式，不支持...
jquery实现弹出层登录和全屏层注册特效
11-23
由于不同的浏览器可能对某些 CSS 或 JavaScript 功能支持不同，代码中检测了浏览器版本（`$.browser.version`），对于 IE6 及以下版本，通过 JavaScript 设置注册和遮罩层的高度为整个文档的高度，确保全屏覆盖。...
JQ实现新浪游戏首页幻灯片
09-03
- **通用全局设定**：统一了页面内元素的默认样式，确保浏览器间的兼容性。 - **`.Homeslide`**：设置了幻灯片的尺寸、颜色以及位置属性。 - **`.Homeslide_hand0` 和 `.Homeslide_hand1`**：定义了左右切换按钮的...
动态上传文件遮罩层
07-18
带图片的动态上传文件，js插件，带遮罩层
Xamarin.Android 悬浮框（背景半透明遮挡）
05-05
Xamarin.Android开发页面弹出悬浮框，弹出层遮挡底层主页面，悬浮框半透明。测试通过源码下载（图片源码没有上传），压缩文件中有最终效果拍照。
js窗口关闭提示信息（兼容IE和firefox）
10-23
主要介绍了当关闭窗口的时候，显示窗口提示信息，友好的进行提示，防止丢失重要信息，需要的朋友可以参考一下
Android实现遮罩层（蒙板）效果
08-26
主要为大家详细介绍了Android实现遮罩层效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Xamarin.Android悬浮框
05-05
Xamarin.Android开发页面弹出悬浮框，弹出层遮挡底层主页面，悬浮框半透明。测试通过源码下载（图片源码没有上传）。
jquery hide在遮罩层的失效问题
guxiansheng1991的博客
03-23 869
摘自新浪微博 thinkpc http://blog.sina.com.cn/s/blog_54ef39890100jyol.html $("#xxx").hide("slow",function(){$(this).css("display","none")}); $("#xxx").show("slow",function(){$(this).css("display","block")}
遮罩层
zhoumimi_comeon123的博客
09-02 785
在java开发中，多级弹框的情况就要考虑使用遮罩层将下层“遮”起来，防止交叉操作。 如何实现遮罩层： 1：定义遮罩层 重要属性： 首先display:none  先隐藏起来； Z-INDEX 三维中z坐标的高度 ，一定在你想遮罩和显示层中间； opacity:不透明度 根据实际情况进行设置； 2：在需要的时候 ，显示遮罩层 如上图：当人员为空时，显示遮罩层，弹出提示框，遮住...
el-dialog 自定义样式 + 去除遮罩层底层可点击
最新发布
qq_52507367的博客
01-07 2033
el-dialog 自定义样式
Jquery实现遮罩层
人生的尽头是孤独
07-21 1112
记录一下Jquery实现遮罩层。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值