<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 意見: