基於jquery的blockui外掛顯示彈出層

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

blockui可以在你傳送ajax請求的時候,顯示一個遮罩層禁止使用者對頁面進行操作並顯示提示資訊;或者用來顯示一個登陸視窗,也可用來顯示圖片等。
  blockui外掛主要使用blockUI和unblockUI兩個方法來控制彈出層的顯示或者隱藏,可以在blockUI方法中指定一些引數,來控制彈出層顯示的內容,大小,位置等。blockUI方法的常用的引數有:message,css,overlayCSS,showOverlay。
  message:主要用來設定要顯示的內容,可以直接設定為一段文字,html程式碼或者使用jquery獲取頁面上隱藏的div。
  css:主要用來設定彈出層的樣式,包括彈出層的位置,大小,邊框等。
  overlayCSS:主要用來設定遮罩層的樣式,包括背景色,透明度等。
  showOverlay:主要用來設定是否顯示遮罩層,如果要隱藏遮罩層可以設定為false。
  下面通過一些例子來看看具體的用法,在頁面匯入jquery.min.js和jquery.blockui.js檔案,具體實現程式碼如下:
複製程式碼 程式碼如下:
$(“#btnSubmit”).click(function () {
$.blockUI({
message: $(“#loginForm”),
css: {
width: ‘300px’,
height: ‘300px’,
left: ($(window).width() – 300) / 2 ‘px’,
top: ($(window).height() – 300) / 2 ‘px’,
border: ‘none’
}
});
});
$(“#btnLogin”).click(function () {
$.blockUI({
message: “<h2>正在登入,請稍候……</h2>”,
css: {
border: ‘1px solid black’
}
});
setTimeout(function () { $.unblockUI() }, 1000);
});
$(“#btnCancel”).click(function () {
$.unblockUI();
});

對應的html程式碼為:
複製程式碼 程式碼如下:
<div id=”loginForm” style=”display:none”>
<table>
<tr>
<td>使用者名稱:</td>
<td><input id=”txtUserName” type=”text” /></td>
</tr>
<tr>
<td>密 碼:</td>
<td><input id=”txtPwd” type=”text” /></td>
</tr>
<tr>
<td><input id=”btnLogin” type=”button” value=”登入” /></td>
<td><input id=”btnCancel” type=”button” value=”取消” /></td>
</tr>
</table>
</div>

您可能感興趣的文章:

jQuery彈出層外掛popShow用法示例jQuery Dialog 彈出層對話方塊外掛JQUERY THICKBOX彈出層外掛jQuery彈出層外掛簡化版程式碼下載Jquery 彈出層外掛實現程式碼jquery.artwl.thickbox.js 一個非常簡單好用的jQuery彈出層外掛jQuery外掛zoom實現圖片全屏放大彈出層特效一個jquery的彈出層的外掛jQuery boxy彈出層外掛中文演示及使用講解js彈出層(jQuery外掛形式附帶reLoad功能)Jquery實現彈出層分享微博外掛具備動畫效果jQuery彈出層外掛Lightbox_me使用指南Jquery彈出層外掛ThickBox的使用方法jQuery彈出層外掛popShow(改進版)用法示例

相關文章

前端開發 最新文章