使用jQuery插件blockUI达到遮罩,当然还有其他更炫的插件(thickBox,stanlemon等),在此不做描述。
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery Block-UI (^_^)</title>
<meta http-equiv="Content-Type" content="text/html">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="jQuery Block UI">
<!-- Dao ru xiang ying de bao: css,jQuery core,jQuery blockUI -->
<link rel="stylesheet" type="text/css" media="screen" href="ui/jquery-ui-1.7.2.redmond.css" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery.blockUI.js"></script>
<style type="text/css">
input {
border: 1px groove #eee;
font-size: 12px;
}
button {
border: 1px groove #eee;
cursor: pointer;
}
div.growlUI {
background: url(./img/check.jpg) no-repeat 10px 10px
}
div.growlUI h1, div.growlUI h2 {
color: white;
padding: 5px 5px 5px 75px;
text-align: left
}
div.growlUI h2 {
font-size: medium
}
</style>
<script type="text/javascript">
<!--
$(document).ready(function() {
//login
$('#btnLogin').click(function() {
$.blockUI({ message: $('#login') });
//setTimeout($.unblockUI, 2000);
});
$('#btnLoginCancle').click(function() {
$.unblockUI('#login');
});
//-------------------------------------------
//wait
$('#btnWait').click(function() {
$.blockUI({ css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
} });
setTimeout($.unblockUI, 2000);
});
//-------------------------------------------
//overlay
$('#btnOverlay').click(function() {
$.blockUI({ overlayCSS: { backgroundColor: '#336699' } });
setTimeout($.unblockUI, 2000);
});
//-------------------------------------------
//tall content
$('#btnTallContent').click(function() {
$.blockUI({
message: $('#tallContent'),
css: { top: '20%' }
});
setTimeout($.unblockUI, 2000);
});
//-------------------------------------------
//image box
$('#btnImageBox').click(function() {
$.blockUI({
message: $('#imageBox'),
css: {
top: ($(window).height() - 400) /2 + 'px',
left: ($(window).width() - 400) /2 + 'px',
width: '100px'
}
});
setTimeout($.unblockUI, 2000);
});
//--------------------------------------------
//none centered message
$('#btnNoneCentered').click(function() {
$.blockUI({
centerY: 0,
css: { top: '10px', left: '', right: '10px' }
});
setTimeout($.unblockUI, 2000);
});
//--------------------------------------------
//null message
$('#btnNullMessage').click(function() {
$.blockUI({ message: null });
setTimeout($.unblockUI, 2000);
});
//--------------------------------------------
//on unblock callback
$('#btnOnUnblock').click(function() {
$.blockUI();
setTimeout(function() {
$.unblockUI({
onUnblock: function(){
alert('useful when using fadeOut option as it is invoked when all the blocking elements have been removed)');
}
});
}, 2000);
});
//--------------------------------------------
//click overlay to block
$(document).ready(function() {
$('#btnClickOverlayToBlock').click(function() {
$.blockUI();
$('.blockOverlay').attr('title','Click to unblock').click($.unblockUI);
});
});
//--------------------------------------------
//auto-unblock: sets a timer to unblock after a specified timeout.
$('#btnAutoUnblock').click(function() {
$.blockUI({
message: '<h3>Auto-Unblock!</h3>',
timeout: 2000
});
});
//--------------------------------------------
//growl: the hard way.
//Maybe some style I cannot import from the office site, but the effect is the same as 'btnGrowlEasy'.
$('#btnGrowlHard').click(function() {
$.blockUI({
message: $('div.growlUI'),
fadeIn: 700,
fadeOut: 700,
timeout: 2000,
showOverlay: false,
centerY: false,
css: {
width: '350px',
top: '10px',
left: '',
right: '10px',
border: 'none',
padding: '5px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .6,
color: '#fff'
}
});
});
//--------------------------------------------
//easy growl
$('#btnGrowlEasy').click(function() {
$.growlUI('Growl Notification', 'Have a nice day!');
});
//--------------------------------------------
//jQuery UI Theme
$('#btnUITheme').click(function() {
$.blockUI({
theme: true,
title: 'This is your title',
message: '<p>This is your message.</p>',
timeout: 2000
});
});
//--------------------------------------------
//onBlock callback
//this may occur error,but I don't know how to solve it.If you recognize that,please send a feedback,pengyou(^_^)!
$('#btnOnBlock').click(function() {
$.blockUI({
fadeIn: 1000,
timeout: 2000,
onBlock: function() {
alert('Page is now blocked; fadeIn complete');
}
});
});
//--------------------------------------------
});
//-->
</script>
</head>
<body>
<!-- buttons -->
<button id="btnLogin">login</button>
<button id="btnWait">wait</button>
<button id="btnOverlay">overlay</button>
<button id="btnTallContent">tallContent</button>
<button id="btnImageBox">imageBox</button>
<button id="btnNoneCentered">noneCentered</button>
<button id="btnNullMessage">nullMessage</button>
<button id="btnOnUnblock">onUnblock</button>
<button id="btnClickOverlayToBlock">clickOverLayToBlock</button>
<button id="btnAutoUnblock">autoUnblock</button>
<button id="btnGrowlHard" title="Mei you xiao guo,but he btnGrowlEasy yi yang.">growlHard</button>
<button id="btnGrowlEasy" title="Tu pian ke neng chu bu lai,because yin yong de shi jue dui lu jing, hehe.">growlEasy</button>
<button id="btnUITheme">uiTheme</button>
<button id="btnOnBlock" title="It can occur CuoWu!">onBlock</button>
<!-- layers -->
<!-- login -->
<div id="login" style="display:none;border:1px solid #336699;">
Account: <input type="text"/><br/>
Password: <input type="password"/><br/>
<button>Enter</button> <button id="btnLoginCancle">Quit</button>
</div>
<!-- tall content -->
<div id="tallContent" style="display:none;border:1px solid #ee66FF;">
<h3>Sunny<br/>So<br/>Long</h3>
</div>
<!-- image box -->
<div id="imageBox" style="display:none;border:1px solid #CC66FF;">
<img src="http://img2.zol.com.cn/product/5/96/cejCWzKmTAw.jpg" width="300" height="200" alt="JiaFeiMao猫">
</div>
</body>
</html>
分享到:
相关推荐
在Qt编程中,实现遮罩窗口(mask window)是一种常见的需求,主要用于在界面操作时提供视觉提示或防止用户误操作。遮罩窗口通常是一个半透明的覆盖层,它允许底层窗口的部分可见,但限制用户的交互。本文将详细介绍...
以上是一个简单的JavaScript图片遮罩效果实现。在实际项目中,可能需要根据需求添加更多功能,如自适应屏幕尺寸、手势操作等。通过深入学习JavaScript和CSS,你可以创建出更加复杂且具有交互性的图片遮罩效果。记得...
本教程将详细介绍如何在iOS中简单实现遮罩层。 首先,我们来看一下`MaskView.h`头文件。这个文件定义了一个名为`MaskView`的自定义视图类,它是`UIView`的子类。在iOS中,`UIView`是所有视图的基础,它负责管理视图...
通过使用 CALayer 的遮罩(Mask)功能,我们可以轻松地实现 iphone 图标的水晶立体效果。下面,我们将详细介绍如何使用遮罩来实现这种效果。 首先,让我们了解一下什么是遮罩(Mask)。在图形编程中,遮罩是一个...
一个简单的遮罩层通常包含一个主要的容器元素,如`div`,该元素具有`id`或`class`以便通过CSS和JS进行引用。此外,还可能有一个或者多个子元素,如`div`模拟的模态窗口或`img`元素显示加载动画。 ```html <!DOCTYPE...
Cesium地图反选遮罩,支持自定义遮罩颜色
在HTML中,我们可以创建一个简单的div元素作为遮罩层的基础结构: ```html <div id="mask"></div> ``` 接下来,我们用CSS来定义遮罩层的样式,使其占据整个屏幕并设置为半透明黑色: ```css #mask { position: ...
一个简单的遮罩层通常包含一个主容器(例如一个`div`元素)以及可能的子元素,如模态窗口或加载指示器。下面是一个基础的HTML布局: ```html <!DOCTYPE html> 遮罩层实现 <!-- 页面主要内容 --> ...
本文实例讲述了JS简单实现点击按钮或文字显示遮罩层的方法。分享给大家供大家参考,具体如下: 运行效果图如下: 完整代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <...
下面是一个简单的实现步骤: 1. 创建一个继承自QWidget的类,作为遮罩层。在构造函数中设置背景颜色(比如灰色)和透明度(通过QColor的alpha通道设置)。 2. 在该类中覆盖`paintEvent()`方法,使用QPainter绘制...
2. **矩形遮罩**:矩形遮罩的实现相对简单,我们只需要在Shader中设置一个矩形区域的剪裁即可。这可以通过比较像素坐标与矩形边界来实现,对超出边界的像素赋予全透明。 为了使遮罩适应不同分辨率的设备,我们需要...
例如,可以使用`transition`和`animation`属性实现遮罩层的平滑显示和隐藏。此外,`position`属性(如`fixed`或`absolute`)可以确保遮罩层始终位于页面的最前端,即使用户滚动页面也是如此。`z-index`属性则用来...
在CocosCreator 2.4.7中,正多边形遮罩Shader是一种技术,用于将精灵(Sprite)渲染成正多边形形状,从而实现更高效和灵活的图形裁剪效果。相比于传统的mask裁剪,它能降低DrawCall,提高游戏性能。DrawCall是图形...
在这个场景中,“实现div 遮罩 frameset”意味着在`frameset`布局的网页上,使用`div`来实现一个可移动的遮罩层或弹出窗口。 首先,我们来看`frameset`。`frameset`是HTML4中的元素,它允许我们将浏览器窗口划分为...
下面是一个简单的JavaScript实现网页遮罩的步骤: 1. **创建HTML结构**:首先,我们需要在HTML中添加一个遮罩元素。这个元素通常是全屏的div,具有相对或绝对定位,以及透明度设置,如以下示例: ```html ; top: ...
在C#编程中,创建一个自定义的半透明遮罩层是常见的需求,尤其是在开发桌面应用或者游戏界面时,为了实现部分区域的视觉隔离或加载等待效果。本教程将介绍如何利用C#来构建这样的功能。 首先,我们需要理解遮罩层的...
Jquery是一个强大的JavaScript库,它简化了DOM操作、事件处理以及动画效果,使得实现遮罩层变得非常简单。本教程将详细讲解如何利用Jquery几行代码快速实现遮罩层。 首先,确保你的HTML文件中已经包含了Jquery库。...
简单几行代码实现web页面遮罩框功能带等待图片 。 -洋
通过软遮罩,你可以使特定区域的内容逐渐淡出,而不是简单地切断,这增加了游戏或应用的用户体验。 资源非插件,意味着它是Unity原生支持的一部分,无需额外安装第三方插件。用户只需将解压后的文件夹导入到Unity...
通过以上知识点,我们可以构建一个简单的半透明遮罩层弹框效果。用户点击按钮后,页面中会展示一个半透明的遮罩层,并且遮罩层上包含一些提示性内容。这样的实现方式在用户界面设计中非常常见,既美观又能很好地与...