张晨的个人博客

使用Jquery.BlockUI进行遮盖处理

张晨的个人博客2014-05-28前端技术 2164 0A+A-

首先导入jquery和jquery.blockUI  js文件

function blockUI(){
$.blockUI({
message: '<image src="../loadingpage.gif">请等待...</image>', 
  css: {
	  border:'none',                   // 无边界
	  width:"150px",                     // 中间框框的宽度
	  top:"30%",                        // 高居中
	  left:"45%",                      // 左居中        
	  padding: '15px',
	  opacity: .9    
 }
});
	   
}

//手动关闭
$.unblockUI(); //关闭遮盖

//如果在页面中ajax提交时使用静态遮盖需要配合setTimeout使用

function sendImage(_this,policy_id){
	//遮盖
	blockUI();
	var id = _this.id;//这个是一个button按钮获取其id
	
	//如果不使用setTimeout  会先执行ajax提交方法 blockUI方法会最后执行
	setTimeout(function(){send(id,policy_id)},500);

	}
			
function send(id,policy_id){
$.ajax({
	url : "<%=basePath %>/cbs/policyImage/sendPolicyImage.do",
	type : "post",
	async : false,
	dataType:"json",
	data : {"policy_id": policy_id},
	success : function(data) {
		var path = $('#path').val();
		if(data != null){
			$.unblockUI(); //关闭遮盖
			//这个是弹出提示
			dialogAjax(data.isSuccess+"",data.message,path,null); 
			if(data.isSuccess == true){
			
			 //发送成功则删除对应的tr行
			 $('#'+id).parent().parent("tr").remove();
			}
		}else{
			 //这个是弹出提示
			dialogAjax(false,"发送请求失败,请联系管理员",path,null);
		}
	}
}); 
}

/**Ajax方式提交提示笑脸使用dialog需要引入jquery-ui.js
页面中需要有
<div id="dialog" title="提示信息" style="display:none">
 <center>
	<image id="dialog_img"></image></br>
	<span>${rmHelper.msgStr}</span>
</center>
</div>
*/
  function dialogAjax(result_flag,msg,path,toPath) {
	    //dialog 信息
	    $("#dialog").dialog({
	        autoOpen:false,
	        buttons:[{
	            text:"关闭",
	            click:function(){
	                	$("#dialog").dialog("close");
	                	if(toPath==null){
	                		$("#backBtn").gobackTopOn();//回到顶端
	                	}else if(result_flag=="false"){
	                		$("#backBtn").gobackTopOn();//回到顶端
	                	}
	                     else if(result_flag=='true' && toPath != null){
	                	 location.href = path+toPath;//跳转到指定的页面
	                	}
	                }
	            }
	            ],
	            position:"top",//弹出位置
	            modal:true,
	            width:400, //窗口宽度
	            height:330,
	            dialogClass: "my-dialog",
	            closeText:false,
	            drag:function(){
	            }
	        });
		 var src_cg=path+"/compent/charisma/img/xiao.png";
		 var src_sb=path+"/compent/charisma/img/ku.png";
		 $("#dialog_msg").html(msg);
		 if(msg!=""){
			if(result_flag=="true"){
    	    	$("#dialog_img").attr("src",src_cg);
    	    	 $("#dialog").dialog("open");
    	     }else if(result_flag=="false"){
    	    	$("#dialog_img").attr("src",src_sb);
    	    	$("#dialog").dialog("open");
    	    	// $("#dialog_false").dialog("open");
    	     }
		 }
	}

 

文章关键词
Jquery
BlockUI
jquery.blockUI
发表评论