jquery遮罩层效果

朴灿烈づ我的快乐病毒、 2022-08-09 00:47 274阅读 0赞

例如点击登录后弹出一个遮罩层“正在登录，请稍后....”，此时用户是不能操作的。代码如下：

前提先引入 jquery-xxxx.min.js、jquery.blockUI.js，这两个js在网上到处都有，我就不多说了。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="script/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="script/jquery.blockUI.js"></script>
    </head>
    <body>
    	<div id="question" style="display: none;">
        	登录中，请稍后... ...
        </div>
        <button οnclick="showTip();">登陆</button>
        <script type="text/javascript">
           function showTip(){
        	   //出现遮罩层效果
        	   $.blockUI(
           			{ 
           				message: $('#question'),
           				css:
           					{ width: '275px',
           					  height:'50px',
           					  left: ($(window).width() - 275) / 2 + 'px',
           					  top:( $(window).height() - 50)/ 2 + 'px'  } 
           			        }
           			);
        	   setTimeout(function(){
        		   //解除遮罩层效果
        		   $.unblockUI(); 
        	   }, 3000)   
           }	
        </script>
    </body>
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关遮罩层

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

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

相关前端遮罩效果

var layer=$('<div id="layer" style="width:1999px ;height: 1999px;position: absolute;

你的名字/ 2023年01月08日 02:21/ 0 赞/ 198 阅读

相关遮罩层的使用

.mark{ top: 0; left: 0; width: 100%;

女爷i/ 2022年10月11日 12:18/ 0 赞/ 211 阅读

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

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

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

相关 jquery遮罩层效果

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

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

相关 css——遮罩层

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

末蓝、/ 2022年06月03日 06:13/ 0 赞/ 306 阅读

相关 [jquery]弹框，遮罩层

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

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

相关实现遮罩效果

<!DOCTYPE html> < html lang= "en"> < head> < meta charset= "UTF-8"> < meta name= "vi

客官°小女子只卖身不卖艺/ 2022年05月25日 02:46/ 0 赞/ 240 阅读

相关自定义遮罩层

业务需求，又不想用网上找的。干脆自己写一个。 // obj 中的参数可以自定义。 var app_mask = { init: functi

╰半橙微兮°/ 2022年01月27日 18:09/ 0 赞/ 378 阅读

相关遮罩层代码

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

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