<script language="javascript">
$(function() {
$("input[id*=btn]").click(function(){
$.blockUI();
});
});
</script>
<asp:Button ID="btn" runat="server" CssClass="BtnBlue" />
jQuery blockUI 可修改參數表:
$.blockUI.defaults = {
// 顯示的文字內容
message: '<h1>Please wait...</h1>',
title: null, // 標題的文字有時用套板時
draggable: true, // 拖曳.須加在 jQuery UI
theme: false, // 設定 jQuery UI 的套版
// 樣式設計
css: {
padding: 0,
margin: 0,
width: '30%',
top: '40%',
left: '35%',
textAlign: 'center',
color: '#000',
border: '3px solid #aaa',
backgroundColor:'#fff',
cursor: 'wait'
},
// 主題風格
themedCSS: {
width: '30%',
top: '40%',
left: '35%'
},
// 背景圖層
overlayCSS: {
backgroundColor: '#000',
opacity: 0.6,
cursor: 'wait'
},
// 鼠標圖示設定
cursorReset: 'default',
// 樣式運用 $.growlUI
growlCSS: {
width: '350px',
top: '10px',
left: '',
right: '10px',
border: 'none',
padding: '5px',
opacity: 0.6,
cursor: null,
color: '#fff',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px'
},
// IE 讀取的問題
iframeSrc: /^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank',
// 修復IE問題
forceIframe: false,
// z-index 設定
baseZ: 1000,
// 如果都設定為 true 則自動置中
centerX: true,
centerY: true,
// 修復IE問題
allowBodyStretch: true,
// 是否禁止滑鼠事件
bindEvents: true,
// 鍵盤事件
constrainTabKey: true,
// 淡入的時間.單位為毫秒
fadeIn: 200,
// 淡出的時間.單位為毫秒
fadeOut: 400,
// 自動解鎖.單位為毫秒 0為手動解鎖
timeout: 0,
// 是否顯示覆蓋圖層
showOverlay: true,
// 是否設定滑鼠焦點
focusInput: true,
// 淡入完成後執行
onBlock: null,
// 淡出執行
// onUnblock(element, options)
onUnblock: null,
// IE BUG 需要知道詳細請看 http://groups.google.com/group/jquery-en/browse_thread/thread/36640a8730503595/2f6a79a77a78e493#2f6a79a77a78e493
quirksmodeOffsetHack: 4,
// 消息區塊 類別名稱
blockMsgClass: 'blockMsg',
// 是否重複允許封鎖
ignoreIfBlocked: false
};
http://blog.hellocode.info/2012/11/jquery-blockui.html
僅利用Javascript達到相同的類式效果可參考此頁:
https://www.dotblogs.com.tw/joysdw12/archive/2012/12/13/85629.aspx
僅利用Javascript達到相同的類式效果可參考此頁:
https://www.dotblogs.com.tw/joysdw12/archive/2012/12/13/85629.aspx
0 意見: