遮罩简单实现

最新推荐文章于 2024-11-18 04:38:27 发布

最新推荐文章于 2024-11-18 04:38:27 发布 · 169 阅读

文章标签：

#遮罩 #Mask Layer

Web 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用jQuery BlockUI插件为网页添加遮罩效果，包括登录框、等待提示、覆盖层等多种场景的应用实例。

使用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>

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>

<!--

$(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>

<button id="btnLogin">login</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>

Account:  <input type="text"/><br/>

Password: <input type="password"/><br/>

<button>Enter</button> <button id="btnLoginCancle">Quit</button>

</div>

<h3>Sunny<br/>So<br/>Long</h3>

</div>

</div>

</body>

</html>