Jquery超简单遮罩层实现代码

电玩女神 2023-10-07 11:19 34阅读 0赞

在开发中，为了避免二次提交，遮罩层的运用越来越普遍

看了很多代码，下面跟大家分享一下我认为最简单的遮罩层实现方式：

1.样式如下设置：

**CSS代码**：

<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.指定层的高度、和宽度。

**js代码**

<pre class="html" name="code"><script type="text/javascript">   
        //兼容火狐、IE8 
        //显示遮罩层  
        function showMask(){   
            $("#mask").css("height",$(document).height());   
            $("#mask").css("width",$(document).width());   
            $("#mask").show();   
        }
        //隐藏遮罩层
        function hideMask(){   
            
            $("#mask").hide();   
        }
       
    </script>

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

**html代码**

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

4.使用方法：

在ajax提交表单后，加上showMask方法，数据返回后，加上hideMask()

需要的亲们可以根据自己需求，在遮罩层上面加一些提示信息

转载：[https://blog.csdn.net/tolcf/article/details/38712343][https_blog.csdn.net_tolcf_article_details_38712343]

[https_blog.csdn.net_tolcf_article_details_38712343]: https://blog.csdn.net/tolcf/article/details/38712343

发表评论取消回复

表情：

评论列表（有 0 条评论，34人围观）

还没有评论，来说两句吧...

相关阅读

相关 Jquery超简单遮罩层实现代码

在开发中，为了避免二次提交，遮罩层的运用越来越普遍看了很多代码，下面跟大家分享一下我认为最简单的遮罩层实现方式： 1.样式如下设置： CSS代码： <styl

电玩女神/ 2023年10月07日 11:19/ 0 赞/ 35 阅读

相关遮罩层

<view class="pop"> <view class="cont"> 内容 </view> </view> .

深藏阁楼爱情的钟/ 2023年01月11日 13:05/ 0 赞/ 337 阅读

相关 uniapp实现一个遮罩层

.mark{ position:absolute; height: 500rpx; color:

亦凉/ 2022年10月19日 12:43/ 0 赞/ 666 阅读

相关 jQuery鼠标悬停文字遮罩层

[下载地址][Link 1]背景色页可换成图片，只需将li下面的div换成img即可，可直接复用div的class样式。li中a标签可添加自己所需的链接地址。 ![16315

柔情只为你懂/ 2022年09月11日 13:24/ 0 赞/ 251 阅读

相关 jquery遮罩层效果

例如点击登录后弹出一个遮罩层“正在登录，请稍后....”，此时用户是不能操作的。代码如下：前提先引入 jquery-xxxx.min.js、jquery.blockUI.j

朴灿烈づ我的快乐病毒、/ 2022年08月09日 00:47/ 0 赞/ 296 阅读

相关 [jquery]弹框，遮罩层

之前使用semantic的modal作为遮罩层。出现了一些关乎源代码的bug。所以自己必须要写一个自己的弹框以达到目的： ![这里写图片描述][SouthEast]

拼搏现实的明天。/ 2022年06月03日 04:18/ 0 赞/ 372 阅读

相关 CSS实现遮罩层

<div id="main"> <button @click="open">open</button> <div cl

短命女/ 2022年05月26日 13:44/ 0 赞/ 346 阅读

相关 js实现的简单遮罩层

超级简单的一个实现，可能会有局限性，贵在简单易懂，使用的时候执行前loading,执行成功后loaded / 显示loading遮罩层 /

女爷i/ 2021年12月22日 18:43/ 0 赞/ 329 阅读

相关 css 遮罩层简单应用

html <input id="btnshow" type="button" value="Show" onclick="showdiv();"> <div

红太狼/ 2021年10月14日 06:32/ 0 赞/ 439 阅读

相关遮罩层代码

1. 目的 : 直接复制来用, 加快工作效率 <div class="cover"></div> .cover{

我会带着你远行/ 2021年09月17日 04:18/ 0 赞/ 540 阅读