弹出层之2：JQuery.BlockUI

JQuery BlockUI 插件使用教程

最新推荐文章于 2017-03-23 18:14:56 发布

原创最新推荐文章于 2017-03-23 18:14:56 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Jquery.BlockUI #弹出层 #遮罩

jquery 专栏收录该内容

16 篇文章

订阅专栏

本文介绍 JQuery.BlockUI 的使用方法，包括引入插件、调用方式及样式修改等内容。BlockUI 可模拟 AJAX 同步行为，锁定浏览器，支持 Iframe 和 Modal，适用于多种场景。

JQuery.BlockUI是众多JQuery插件弹出层中的一个，它小巧（原版16k，压缩后10左右）,容易使用, 功能齐全，支持Iframe，支持Modal，可定制性高也意味他默认谦虚的外表。

jQuery的BlockUI插件可以让你在使用AJAX时模拟同步行为，锁定浏览器(模式窗口)。当被激活时，它会防止用户活动的页面（或页面的一部分），直到它被禁用。 BlockUI添加元素的DOM，给它的外观和阻止用户交互行为。

1、首先引入插件

2、调用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="scripts/jquery2.0.2.js" type="text/javascript"></script>
    <script src="scripts/jquery-block/jquery.blockUI.js" type="text/javascript"></script>
    <script type="text/javascript">
        var hideDialog = function () {
            $.unblockUI();
        };

        $(function () {
            $("#btn1").click(function () {
                //
                $.blockUI();
                window.setTimeout(hideDialog, 3000);
            });

            $("#btn2").click(function () {
                //自定义消息内容
                $.blockUI({ message: "正在提交" });
                //$.blockUI({ message: '<h3><img src="busy.gif" /> Just a moment...</h3>' });
                window.setTimeout(hideDialog, 3000);
            });
            $("#btn3").click(function () {
                $.blockUI({
                    css: { 'backgroundColor': '#f00', color: '#fff' }
                });
                window.setTimeout(hideDialog, 3000);
            });
            $("#btn4").click(function () {
                //定义弹出的信息为页面的某一个元素
                $.blockUI({ message: $('#dom_element') });
                window.setTimeout(hideDialog, 3000);
            });

            $("#btn5").click(function () {
                //淡入 淡出 自动关闭时间
                $.blockUI({ fadeIn: 700, fadeOut: 700, timeout: 2000 });
            });

            $("#btn6").click(function () {
                //简单的气泡提示
                $.growlUI('提示', '删除成功!');
            });
            $("#btn7").click(function () {
                $.blockUI({
                    message: "正在提交，请稍候...",
                    css: {
                        border: 'none',
                        padding: '15px',
                        backgroundColor: '#000',
                        '-webkit-border-radius': '8px',
                        '-moz-border-radius': '8px',
                        opacity: 0.3,
                        color: '#fff'
                    }
                });
                window.setTimeout(hideDialog, 3000);
            });
        });
    </script>
</head>
<body>
    <button id="btn1">
        弹出层</button>
    <button id="btn2">
        设置标题的弹出层</button>
    <button id="btn3">
        自定义样式</button>
    <button id="btn7">
        自定义标题与样式</button>
    <button id="btn4">
        定义弹出的消息是页面上的某个元素</button>
    <button id="btn5">
        淡入 淡出 自动关闭时间</button>
    <button id="btn6">
        简单的气泡提示</button>
    <div style="width: 200px; height: 200px" id="dom_element">
        页面元素
    </div>
</body>
</html>

3、样式修改

jQuery blockUI 提供的默认样式过于朴素, 可以在每一次调用blockUI() 函数时进行修改. 也一次直接修改库文件 jquery.blockUI.js, 修改$.blockUI.defaults 对象相关的代码：

	// override these in your code to change the default behavior and style
		$.blockUI.defaults = {
			// message displayed when blocking (use null for no message)
			//弹出的消息
			message:  '<h1>Please wait...</h1>',

			title: null,		// title string; only used when theme == true
			draggable: true,	// only used when theme == true (requires jquery-ui.js to be loaded)

			theme: false, // set to true to use with jQuery UI themes

			// styles for the message when blocking; if you wish to disable
			// these and use an external stylesheet then do this in your code:
			// $.blockUI.defaults.css = {};
			//默认定义的消息框的css样式
			css: {
				padding:	0,
				margin:		0,
				width:		'30%',
				top:		'40%',
				left:		'35%',
				textAlign:	'center',
				color:		'#000',
				border:		'3px solid #aaa',
				backgroundColor:'#fff',
				cursor:		'wait'
			},

			// minimal style set used when themes are used
			themedCSS: {
				width:	'30%',
				top:	'40%',
				left:	'35%'
			},

			// styles for the overlay
			//遮罩层的样式
			overlayCSS:  {
				backgroundColor:	'#000',
				opacity:			0.6,
				cursor:				'wait'
			},

			// style to replace wait cursor before unblocking to correct issue
			// of lingering wait cursor
			cursorReset: 'default',

			// styles applied when using $.growlUI
			 // 使用$.growlUI完成自动气泡时的样式 
			growlCSS: {
				width:		'350px',
				top:		'10px',
				left:		'',
				right:		'10px',
				border:		'none',
				padding:	'5px',
				opacity:	0.6,
				cursor:		'default',
				color:		'#fff',
				backgroundColor: '#000',
				'-webkit-border-radius':'10px',
				'-moz-border-radius':	'10px',
				'border-radius':		'10px'
			},

			// IE issues: 'about:blank' fails on HTTPS and javascript:false is s-l-o-w
			// (hat tip to Jorge H. N. de Vasconcelos)
			/*jshint scripturl:true */
			iframeSrc: /^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank',

			// force usage of iframe in non-IE browsers (handy for blocking applets)
			// 是否在非IE浏览器中使IFrame获得焦点，未验证的
			forceIframe: false,

			// z-index for the blocking overlay
			// 遮罩层的Z-Index值，越大越在上面
			baseZ: 1000,

			// set these to true to have the message automatically centered
			//是否居中
			centerX: true, // <-- only effects element blocking (page block controlled via css above)
			centerY: true,

			// allow body element to be stetched in ie6; this makes blocking look better
			// on "short" pages.  disable if you wish to prevent changes to the body height
			//是否允许拉大 
			//短的网页上。禁用如果你想防止车身高度的变化
			allowBodyStretch: true,

			// enable if you want key and mouse events to be disabled for content that is blocked
			//遮罩时是否禁用键盘和鼠标事件
			bindEvents: true,

			// be default blockUI will supress tab navigation from leaving blocking content
			// (if bindEvents is true)
			//遮罩内容的Tab导航是否可用
			constrainTabKey: true,

			// fadeIn time in millis; set to 0 to disable fadeIn on block
			fadeIn:  200,

			// fadeOut time in millis; set to 0 to disable fadeOut on unblock
			fadeOut:  400,

			// time in millis to wait before auto-unblocking; set to 0 to disable auto-unblock
			timeout: 0,

			// disable if you don't want to show the overlay
			 //是否自动遮罩
			showOverlay: true,

			// if true, focus will be placed in the first available input field when
			// page blocking
			//自动获得焦点
			focusInput: true,

            // elements that can receive focus
            focusableElements: ':input:enabled:visible',

			// suppresses the use of overlay styles on FF/Linux (due to performance issues with opacity)
			// no longer needed in 2012
			// applyPlatformOpacityRules: true,

			// callback method invoked when fadeIn has completed and blocking message is visible
			onBlock: null,

			// callback method invoked when unblocking has completed; the callback is
			// passed the element that has been unblocked (which is the window object for page
			// blocks) and the options that were passed to the unblock call:
			//	onUnblock(element, options)
			//调用解封已完成时回调方法;
			onUnblock: null,

			// callback method invoked when the overlay area is clicked.
			// setting this will turn the cursor to a pointer, otherwise cursor defined in overlayCss will be used.
			onOverlayClick: null,

			// don't ask; if you really must know: http://groups.google.com/group/jquery-en/browse_thread/thread/36640a8730503595/2f6a79a77a78e493#2f6a79a77a78e493
			quirksmodeOffsetHack: 4,

			// class name of the message block
			blockMsgClass: 'blockMsg',

			// if it is already blocked, then ignore it (don't unblock and reblock)
			ignoreIfBlocked: false
		};

以上简要介绍了Jquery.BlockUI的使用，欢迎大家指正和补充，详细内容可以访问官方网站

本例下载地址：http://download.youkuaiyun.com/detail/u011872945/7270847