1. 程式人生 > >重複提交,加遮罩層

重複提交,加遮罩層

function ajaxLoading(msg,msgMaginTop){
	//資訊提示
	var default_msg = '正在處理,請稍後。。。';
	//資訊佈局位置向上內邊距
	var default_msgMaginTop= -45;
	var _msg = '';
	var _msgMaginTop=0;
	// 判斷引數
	if (msg == 'undefined') {
		_msg = default_msg;
	} else {
		_msg = msg;
	}	
	if (msgMaginTop == 'undefined') {
		_msgMaginTop = default_msgMaginTop;
	} else {
		_msgMaginTop = msgMaginTop;
	}	
	//$("<div class=\"datagrid-mask\"></div>").css({display:"block",width:"100%",height:$(window).height()}).appendTo("body");
	$("<div class=\"datagrid-mask\"></div>").css({display:"block",width:"100%",height:document.body.offsetHeight}).appendTo("body");
	$("<div class=\"datagrid-mask-msg\"></div>").html(_msg).appendTo("body").css({display:"block",left:($(document.body).outerWidth(true) - 190) / 2,top:(document.body.offsetHeight + _msgMaginTop) / 2});
}

function ajaxLoadEnd(){
	$(".datagrid-mask").remove();
	$(".datagrid-mask-msg").remove();
}

css:

.datagrid-mask {
    position: absolute;
    left: 0;
    top: 0;
    background: #ccc;
    opacity: 0.3;
    filter: alpha(opacity=30);
    display: none;
}

.datagrid-mask-msg {
    position: absolute;
    left: 100px;
    top: 50px;
    width: auto;
    height: 16px;
    padding: 12px 5px 10px 30px;
    background: #fff url('images/pagination_loading.gif') no-repeat scroll 5px 10px;
    border: 2px solid #ccc;
    color: #222;
    display: none;
}

使用示例:

   ajaxLoading();
	$('#myform').form('submit',{
		url:"vehAlarmHandleCtrl.do?method=setHandle",
		onSubmit: function(){
			return $(this).form('validate');
		}	,
		success: function(data){
			ajaxLoadEnd();
			returns(data);
		}
	});

效果:


相關推薦

重複提交,

function ajaxLoading(msg,msgMaginTop){ //資訊提示 var default_msg = '正在處理,請稍後。。。'; //資訊佈局位置向上內邊距 var default_msgMaginTop= -45; var _msg

前端頁面給指定的div添,並且帶有加載中的小旋轉圖片

left 說了 -s 加載 jquer 其中 ges loading style 話不多說,先上代碼,其實還是比較簡單的 1 $("<div id=‘shade‘ style=‘opacity:0.85;background:white‘></div

ajax同步提交不顯示

業務需求: 上傳資源,由於某種原因必須用到ajax同步去上傳。上傳時耗時較長,為避免使用者再上傳過程中誤操作,需要加遮罩層。 猜到的坑: 正常情況下,如果是非同步是沒有任何問題的。 function upload(){ $("#mask").show();

表單提交加重複提交

遮罩層: 增加css樣式: .loadingWrap{ position:fixed; top:0; left:0; width:100%; height:100%; z-index:300; background-

表單提交加和防重複提交

遮罩層:css里加.loadingWrap{ position:fixed; top:0; left:0; width:100%; height:100%;

用JavaScript實現CheckBox的全選取消反選,及中添內容

document 當前 CI itl HA posit size classlist ML 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta cha

easyui彈出(轉)

data bsp yui 取消加載 true 彈出 pan doc outer //彈出加載層 function load() { $("<div class=\"datagrid-mask\"></div>").css({ displ

網頁提交時新增

// 表單提交遮罩 $(document).ready(function() { $("form").submit(function() { // 新增 GRAYLAYER.create("grayLayer-div"); window.onblur = fu

解決bootstrap提交後進行全域性重新整理導致的仍然存在的問題

首先,宣告,本人轉載自http://blog.csdn.net/murphy_wnag/article/details/66478346在此,非常感謝MURPHY_WNAG的文章對我問題的解決給與了很大幫助下面是我自己的一些看法:遮罩層存在的原因確實是由於存在一個modal-

Winform應用程序實現通用

圖片 ted containe completed ini spa mst per 動圖 Winform應用程序實現通用遮罩層 在WEB上,我們在需要進行大數據或復雜邏輯處理時,由於耗時較長,一般我們會在處理過程中的頁面上顯示一個半透明的遮罩層,上面放個圖標或提示:

Winform應用程序實現通用

添加 str img 控件 text 邏輯 mar chang sha 之前先後發表過:《Winform應用程序實現通用遮罩層》、《Winform應用程序實現通用消息窗口》,這兩款遮罩層其實都是基於彈出窗口的,今天為大家分享一個比較簡單但界面相對友好的另一種實現方案,廢話不

JS+CSS簡單實現DIV顯示隱藏【轉藏】

button left dtd -m javascrip htm width dex absolute <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

小特效

cti wid bsp z-index log pos absolute 登錄 reat 今天學了一個遮罩層的特效,主要用在網頁裏面註冊頁面和登陸頁面的使用:     <style>     * {     margin: 0px;   

隱藏電池欄,

idt col interact btn pcl blog num selector select - (BOOL)prefersStatusBarHidden { return YES;//隱藏為YES,顯示為NO } - (void)tapClick:(

實現彈出

point func relative cit get alpha fun javascrip pla 開發中經常會用到彈出遮罩層的時候,下面是一個簡單的遮罩層彈窗 <style type="text/css"> <

鼠標hover圖片時勻速上升顯示內容top、定位

log 功能 float 相對 body idt ive 子元素 hid 1.html <div class="div1"> <div class="div11"> <p >Dolor nunc vule put

fun idt 遮罩 計算 absolut right add borde spl html代碼 <!-- loading 層 --> <div id="loadingDivBack" style="display: none; position:

彈窗

mask func .sh back spl none align padding round 添加遮罩彈窗 css: <style> #headul{   width: 100%;   height:

微信小程序彈出和隱藏動畫以及五星評分

weixin cli pan ppm for 數組 HA 分層 ref 參考源碼: http://www.see-source.com/weixinwidget/detail.html?wid=82 https://blog.csdn.net/pcaxb/article

bootstrap模態框hide不隱藏解決辦法

bootstrap modal 模態框 hide 問題:在使用ajax提交模態框表單數據後,隱藏模態框並局部刷新,導致遮罩層不消失 原因:模態框隱藏並局部刷新,導致在hide方法沒執行完成時已經局部刷新,沒有隱藏掉遮罩層 解決辦法:方法一:把模態框放在更上層頁面,而不是放在子頁面上 方法二:利