html 等待界面

<div id="form_submit"><input type="button" id="message_submit" value="发布消息" onclick="sendOSMessageForAll()"/></div>

<!--等待div--> 
<div id="pop" style="z-index:1;background-color:#CCCCCC;filter: alpha(opacity=80);width:100%;height:100%;position:absolute;left:0px;top:0px;display:none"> 
	<!-- <div style="text-align:center;height:100%;line-height:250px;overflow:hidden;">发送中,请稍等...</div> -->
</div>
<div id="loading" class="loading" style="display:none;">发送中,请稍等...</div>


<script type="text/javascript">
<!--打开或关闭等待div-->
function show(o1,o2,open)
{ 
	var o1 = document.getElementById(o1); 
	var o2 = document.getElementById(o2);
	o1.style.width = document.documentElement.scrollWidth; 
	o1.style.height = document.documentElement.scrollHeight
	if(open){
		o1.style.display = "block"; 
		o2.style.display = "block"; 
	}else{
		o1.style.display = "none";  
	}
}

function showLoading(open)
{ 
	var dialog = document.getElementById("loading"); 
	if(open){
		dialog.style.display = "block"; 
	}else{
		dialog.style.display = "none"; 
	}
	return true;
}

function sendOSMessageForAll() 
{	
	show('pop','message_form',true);
	showLoading(true);
	$.ajax({
		url : 'android/createOSMessage.action',
        data:{senderId:$("#senderId").attr("value"),content:$("#content").attr("value"),receiver:$("#receiver").attr("value")},
        cache : false, 
        async : true,
        type : "POST",
        dataType : 'json',
        beforeSend:function(){ 
        	show('pop','message_form',true);
        	showLoading(true);
        },
        success : function (result)
        {
        	if (result != null) 
	    	{
	    		if(result.status == "0")
	    		{
	            	show('pop','message_form',false);
	    			showLoading(false);
	    			alert("发送成功!"); 
	    		}
	    		else
	    		{
	            	show('pop','message_form',false);
	    			showLoading(false);
	    			alert("发送失败!"); 
	    		}
	    	}
        },
    	error:function(msg)
        {
        	show('pop','message_form',false);
			showLoading(false);
			alert("发送错误!"); 
        },
        complete:function(){

        } 
	});
}
</script>


效果如图:

技术分享

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。