弹出框BlockUI

原创于 2013-05-03 09:43:37 发布 · 314 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ui #ViewUI

css 专栏收录该内容

34 篇文章

订阅专栏

用的比较多的弹出框有两种：jquery的ui-dialog插件和jquery blockUI插件

<input type="button" id="blockUI" value="blockUI"/>
<br>
<input type="button" id="blockUI-dialog-extend" value="blockUI-dialog-extend"/>
<br>
<input type="button" id="jquery-ui" value="jquery-ui"/>
<br>
<div id="dialog-div" style="display:none;"></div>

<link href="http://localhost:8080/ucweb/skins/css/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
<link href="http://localhost:8080/ucweb/skins/css/blockui_css.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="http://localhost:8080/ucweb/skins/js/jquery.js"></script>
<script language="javascript" src="http://localhost:8080/ucweb/skins/js/jquery.blockUI.js"></script>
<script language="javascript" src="http://localhost:8080/ucweb/skins/js/dialog.js"></script>
<script language="javascript" src="http://localhost:8080/ucweb/skins/js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
	$("#blockUI").on("click",function(){
		$.blockUI({
			 message: '<p>your message</p>', 
	         timeout: 2000,
	         onUnblock: function(){
					alert(1);
				} 
		});
	});
	$("#blockUI-dialog-extend").on("click",function(){
		dialog.success("blockUI-dialog-extend is success",function(){alert(2)});
	});
	
	$("#jquery-ui").on("click",function(){
		
			$("#dialog-div").dialog({
				 title: "title",
			      buttons: {
			        "true": function() {
			          alert(3);
			          $(this).dialog('close');
			        }
			      }
			});
		});
});
	
dialog.confirm("删除提示",'确定删除子账号 "'+nick_name+'" ?',function(decision){
			if(decision){
				$.ajax({
					url:delSubAccountUrl,
					data: {sub_account:uid_temp},
					type : "POST",
					success : function(data){
						data = eval('('+data+')');
						if(data == '1'){
							$('#tr_'+uid_temp).remove();
						}else{
							dialog.error('删除失败，请稍后重试！');
						}
					}
				});
			}
		});
</script>

blockui:

弹出框：官网http://jquery.malsup.com/block/#demos
$(document).ready(function(){
$("#testBlockUi").click(function(){
 
$.blockUI({ 
message: '<iframe src="http://localhost/TestCSS/test/testBlockUIAndIframe.html" scrolling="yes" style="width:100%;height:400px;" frameborder="0"></iframe>',
// 定义内容
 title: 'ui弹出框的标题', // 定义标题
                 theme: true, // 是否自定义弹出框的位置信息: themedCSS----两者同时起作用，true表示使用自定义的样式，false是按默认处理
                 themedCSS: {
    width: '775px',
     left: '25%',
     top: '5%'    //定义的是弹出框的样式--如宽、离上侧的距离、离左侧的距离
}
});
});
});

dialog.js 在blockui之上建立

(function($,window){
	var callback_opt = {};
	$.extend($.blockUI.defaults.overlayCSS, { 
        backgroundColor:'#aaa', 
        opacity:        '0.4' ,
		cursor:'default'
	});
	$.extend($.blockUI.defaults.themedCSS, { 
		width:	'300px',
		left:'40%'
	});
	$.blockUI.defaults.baseZ = 90000000;
	$.blockUI.defaults.centerX = false;
	$.blockUI.defaults.centerY = false;
	$.extend($.blockUI.defaults.css, { 
		minWidth:	'180px',
		minHeight:'60px',
		width:'auto',
		height:'auto',
		_height:'60px',
		left:'40%',
		border:		'3px solid #d3e8f5',
		textAlign:	'left',
		maxWidth:'230px'
	});
	window.dialog = {
		/**
		 * @private
		 */
		_show2 : function(title,msg,callback,scope,btn_str,tip){
			if(typeof title == "object"){
				msg = title.msg || title.message;
				callback = title.callback || title.cb;
				scope = title.scope;
				title = title.title;
			}
			title = $.trim(title) || tip;
			title = title+"<a href='javascript:dialog.unblockUI(false,false);' class='ui-dialog-titlebar-close dialog-close-icon'></a>";
			$.blockUI({ 
		        theme:     true, 
		        title:    title, 
		        message:  (msg || "")+btn_str
		    });
			callback_opt = {
					onUnblock : function(){
						if($.isFunction(callback)){
							callback.call(scope||window,callback_opt.ok);
						} else if(typeof callback == "string"){
							try{
								window[callback](callback_opt.ok);
							}catch(e){
								
							}
						}
						callback_opt = {};
					}	
			};
		},
		show : function(config){
			if(!config){
				return;
			}
			var _close = "<a href='javascript:dialog.unblockUI(false,false);' class='ui-dialog-titlebar-close dialog-close-icon'></a>";
			config.title = config.title ? config.title+_close : _close;
			var callback = config['callback'] || config['onUnblock']
			,scope = config['scope'];
			$.blockUI(config);
			callback_opt = {
					onUnblock : function(){
						if($.isFunction(callback)){
							callback.call(scope||window,callback_opt.ok);
						} else if(typeof callback == "string"){
							try{
								window[callback](callback_opt.ok);
							}catch(e){
								
							}
						}
						callback_opt = {};
					}	
			};
		
		},
		alert : function(title,msg,callback,scope){
			var btn_str = '<div class="ui-dialog-btn-bar">'
						  +'<a class="ui-dialog-btn btn_o" href="javascript:dialog.unblockUI();">确定</a>'
						  +'</div>';
			if(typeof msg !="string"){
				callback = msg;
				msg = title;
				title = "提示框";
			}
			dialog._show2(title,msg,callback,scope,btn_str,"提示框");
		},
		confirm : function(title,msg,callback,scope){
			var btn_str = '<div class="ui-dialog-btn-bar">'
						  +'<a class="ui-dialog-btn btn_o" href="javascript:dialog.unblockUI(true);">确定</a>'
						  +'<a class="ui-dialog-btn btn_w" href="javascript:dialog.unblockUI(false);">取消</a>'
						  +'</div>';
			if(typeof msg !="string"){
				callback = msg;
				msg = title;
				title = "确认对话框";
			}
			dialog._show2(title,msg,callback,scope,btn_str,"确认对话框");
		},
		success : function(msg,callback,scope,sc){
			if(typeof msg == "object"){
				callback = msg.callback || msg.cb;
				scope = msg.scope;
				msg = msg.msg || msg.message;
			}
			sc = sc || "dialog-success";
			$.blockUI({ 
				message: '<div class="'+sc+'"></div><p class="dialog-tip">'+msg+'</p>',
	            fadeOut: 700,
				timeout: 1500,
				onUnblock: function(){
					if($.isFunction(callback)){
						callback.call(scope||window);
					} else if(typeof callback == "string"){
						try{
							window[callback]();
						}catch(e){
							
						}
					}
				} 
			});
		},
		error : function(msg,callback,scope){
			dialog.success(msg,callback,scope,"dialog-error");
		},
		unblockUI : function(ok,docb){
			if(docb===false){
				callback_opt = {};
			} else {
				callback_opt.ok = ok;
			}
			$.unblockUI(callback_opt);
		}
	}
	
})(jQuery,window);

此外，还有jquery ui