`
zhaoshijie
  • 浏览: 2259894 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

界面遮罩层例子

    博客分类:
  • JSP
 
阅读更多

关键字:界面遮罩层例子


一、自己写的遮罩层例子

附件遮罩层.rar为普通js界面遮罩层例子。



二、jQuery遮罩层例子(引入附件 jquery.zip中的两个插件)

1、下面一句话即可搞定
$.blockUI({ message: '<h1><img  src="busy.gif" /> Just a moment...</h1>',css: { backgroundColor: '#f00', color: '#fff'} });

2、解除锁定

$.unblockUI();


全屏锁屏例子:
js代码:

$(function(){
  
   $('#test').click(function() {
            $.blockUI({ message: $('#question'), css: { width: '275px' } });
        });

        $('#yes').click(function() {
            // update the block message
            $.blockUI({ message: "<h1>正在进行通信...</h1>" });

            $.ajax({
                url: 'wait.php',
                cache: false,
                complete: function() {
                    // unblock when remote call returns
                    $.unblockUI();
                }
            });
        });

        $('#no').click($.unblockUI);
  
});


html代码:

    <input id="test" type="submit" value="显示对话框" />

...

<div id="question" style="display:none; cursor: default">
        <h1>你确信要继续么?.</h1>
        <input type="button" id="确认" value="Yes" />
        <input type="button" id="取消" value="No" />
</div>




局部锁屏例子:

js代码:

$(function() {
        $('#blockButton').click(function() {
            $('#question').block({ message: null });
        });

        $('#blockButton2').click(function() {
            $('#question').block({
                message: '<h1>处理中...</h1>',
                css: { border: '3px solid #a00' }
            });
        });

        $('#unblockButton').click(function() {
            $('#question').unblock();
        });


    });


html代码:

<input type="button" id="blockButton"  value="blockButton" />     
<input type="button" id="blockButton2"  value="blockButton2" />
<input type="button" id="unblockButton"  value="unblockButton" />

<div id="question" >
        <input type="text" class="userText" value="nicole"/><br>
        <input type="password" class="passText" value=" "/><br>
        <input type="button"  value="Yes" /><br>
        <input type="button"  value="No" /><br>
        <input type="button"  value="dddddddddddddddddddddddddddddd" /><br>
</div>



一些设置:

    //设置遮罩层颜色
    $.blockUI.defaults.overlayCSS.backgroundColor = '#ff0';
    // 设置锁定时默认的提示信息(这里将覆盖jquery默认的提示消息)


    //$.blockUI.defaults.message = "Please be patient...  .......";


    // 设置遮罩层更透明
    $.blockUI.defaults.overlayCSS.opacity = '.2';


//如果要使用默认设置来同步所有的AJAX请求动作,代码如下:
$().ajaxStart($.blockUI).ajaxStop($.unblockUI);




更多相关知识:

http://www.cssrain.cn/demo/blockUI-V2/jQuery/blockUI/jQueryBlockUI.html
分享到:
评论

相关推荐

    几个实用的jQuery弹出遮罩层例子

    遮罩层是一种常见的用户界面元素,它在网页上创建一个半透明或全黑的覆盖层,突出显示特定内容,同时防止用户与页面其他部分交互。在jQuery中,我们可以利用CSS和JavaScript轻松实现这一功能。 1. **基本结构**:...

    js打开关闭遮罩层

    在网页开发中,遮罩层(Mask Layer)是一种常见的用户界面元素,用于暂时遮盖页面内容,引导用户注意力或者在加载数据时提供视觉反馈。在本主题中,我们将深入探讨如何使用JavaScript来实现遮罩层的打开和关闭,并...

    C# 自定义半透明遮罩层

    在C#编程中,创建一个自定义的半透明遮罩层是常见的需求,尤其是在开发桌面应用或者游戏界面时,为了实现部分区域的视觉隔离或加载等待效果。本教程将介绍如何利用C#来构建这样的功能。 首先,我们需要理解遮罩层的...

    遮罩层.zip

    在这个例子中,当用户点击一个显示登录的按钮(假设ID为`showLoginBtn`),`showLogin`函数会被调用,显示遮罩层和登录表单。而当用户点击遮罩层或登录表单上的关闭按钮时,`hideLogin`函数会隐藏它们。这种交互式...

    jQuery从下到上弹出遮罩层.rar

    在这个例子中,CSS将被用来定义遮罩层的外观,包括颜色、透明度、位置以及动画效果。一个典型的遮罩层CSS样式可能包括以下内容: ```css .mask-layer { position: fixed; top: 0; left: 0; width: 100%; ...

    弹出遮罩层,纯JS效果,可自定义背景

    在网页开发中,遮罩层(Mask Layer)是一种常见的用户界面元素,用于暂时遮盖页面的部分或全部内容,以突出显示特定信息或者进行交互操作。本教程将详细讲解如何使用纯JavaScript实现一个可自定义背景、效果和定位的...

    遮罩层进度显示

    在IT行业中,尤其是在网页开发领域,"遮罩层"是一个常用的设计元素,它用于暂时禁用用户对页面的交互,通常是为了突出显示特定内容或进行某种操作,如加载、提交表单、显示提示等。本案例中,"遮罩层进度显示"是一个...

    asp.net弹出层带遮罩层

    在ASP.NET开发中,创建一个弹出层带遮罩层的效果是常见的需求,这通常用于显示模态对话框,如登录、确认操作或显示详细信息等。本篇将详细讲解如何实现这一功能,并以"divLogin"作为登录层,"doing"作为遮罩层为例...

    jQuery鼠标经过图片遮罩层效果.zip

    这个"jQuery鼠标经过图片遮罩层效果"就是一个典型的例子,它利用jQuery库实现了当鼠标悬停在图片上时,会显示一个覆盖在图片上的遮罩层,并且具有鼠标跟随的效果。下面将详细讲解这个效果的实现原理和相关知识点。 ...

    使用FrameLayout实现遮罩层

    在Android开发中,创建遮罩层(Mask Layer)是一种常见的需求,它通常用于显示半透明覆盖,以达到提示用户、加载数据或者隐藏部分界面的效果。本篇将详细讲解如何使用`FrameLayout`来实现这样的功能。 `FrameLayout...

    jquery遮罩层

    在网页设计和开发中,jQuery 遮罩层(jQuery Mask)是一种常见且实用的技术,用于在用户界面中创建弹出窗口、加载提示或者进行页面元素的半透明覆盖,以达到突出显示特定内容或交互的目的。jQuery 遮罩层的易用性和...

    CSS3鼠标经过图片遮罩层代码.zip

    在这个例子中,悬停事件可能触发遮罩层的显示,同时可能伴有透明度、颜色、动画等视觉变化。 3. **遮罩层**: 遮罩层通常是一个半透明的元素,覆盖在图片上方,用于添加额外信息或效果。在CSS中,可以使用`...

    androdid遮罩层的实现

    在Android开发中,遮罩层(Mask Layer)是一种常见的用户界面元素,用于在屏幕上覆盖一层半透明或全透明的颜色,通常用于显示加载提示、弹窗提示或者进行界面过渡效果等。"androdid遮罩层的实现"这个主题,旨在探讨...

    遮罩层js+案例,网页步骤引导,新手引导

    在网页设计和开发中,"遮罩层"(Mask Layer)是一种常见的用户界面技术,用于在页面上创建半透明或不透明的覆盖层,通常用于显示提示信息、加载动画、弹窗或者新手引导等场景。"js"在这里指的是JavaScript,一种广泛...

    bootstrap遮罩效果

    最后,你可以根据项目需求调整遮罩层的样式,例如改变背景透明度、调整加载提示的位置和颜色等。在CSS中添加自定义样式: ```css #loading-mask { z-index: 9999; background-color: rgba(0, 0, 0, 0.5); } #...

    通用遮罩层.zip

    在这个例子中,MaskWidget可能是一个自定义的QWidget子类,用于创建遮罩层效果。它可能包含设置遮罩透明度、形状、颜色以及是否可见等方法。 2. `frmmaskwidget.cpp` 和 `frmmaskwidget.h`: 这可能是Form-based ...

    遮罩层滤镜文字发光CSS3特效.zip

    本资源“遮罩层滤镜文字发光CSS3特效.zip”就是一个很好的例子,它包含了一种利用CSS3实现的遮罩层滤镜与文字发光效果的代码示例,适用于提升网页的视觉吸引力和交互性。 首先,让我们深入理解“遮罩层滤镜”。遮罩...

    flex as3 air ria 遮罩的使用例子

    首先,遮罩是通过将一个显示对象作为另一个对象的遮罩层来实现的。遮罩层通常是黑色和白色的位图图像,其中白色部分表示透明,黑色部分表示不透明。在AS3中,我们可以使用DisplayObject类的mask属性来指定遮罩。 ...

    jquery实现点击按钮弹出带有过渡效果的遮罩层窗口动画效果源码.zip

    本资源"jquery实现点击按钮弹出带有过渡效果的遮罩层窗口动画效果源码.zip"提供了使用jQuery创建动态、具有过渡效果的遮罩层窗口的代码示例,这对于构建用户友好的网页界面非常有用。 首先,我们要理解jQuery中的...

Global site tag (gtag.js) - Google Analytics