重複提交,加遮罩層
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方法沒執行完成時已經局部刷新,沒有隱藏掉遮罩層 解決辦法:方法一:把模態框放在更上層頁面,而不是放在子頁面上 方法二:利