基于jquery的blockui插件顯示彈出層

更新時(shí)間：2011年04月14日 19:27:43 作者：

在做網(wǎng)站的開發(fā)過程中，可能需要使用彈出層，使用jquery的blockui插件可以很輕松的實(shí)現(xiàn)這個(gè)效果。

blockui可以在你發(fā)送ajax請(qǐng)求的時(shí)候，顯示一個(gè)遮罩層禁止用戶對(duì)頁面進(jìn)行操作并顯示提示信息；或者用來顯示一個(gè)登陸窗口，也可用來顯示圖片等。
　　blockui插件主要使用blockUI和unblockUI兩個(gè)方法來控制彈出層的顯示或者隱藏，可以在blockUI方法中指定一些參數(shù)，來控制彈出層顯示的內(nèi)容，大小，位置等。blockUI方法的常用的參數(shù)有：message,css,overlayCSS,showOverlay。
　　message：主要用來設(shè)置要顯示的內(nèi)容，可以直接設(shè)置為一段文字，html代碼或者使用jquery獲取頁面上隱藏的div。
　　css：主要用來設(shè)置彈出層的樣式，包括彈出層的位置，大小，邊框等。
　　overlayCSS：主要用來設(shè)置遮罩層的樣式，包括背景色，透明度等。
　　showOverlay：主要用來設(shè)置是否顯示遮罩層，如果要隱藏遮罩層可以設(shè)置為false。
　　下面通過一些例子來看看具體的用法，在頁面導(dǎo)入jquery.min.js和jquery.blockui.js文件，具體實(shí)現(xiàn)代碼如下：

復(fù)制代碼代碼如下:

 
$("#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>正在登錄，請(qǐng)稍候……</h2>", 
css: { 
border: '1px solid black' 
} 
}); 
setTimeout(function () { $.unblockUI() }, 1000); 
}); 
$("#btnCancel").click(function () { 
$.unblockUI(); 
}); 

對(duì)應(yīng)的html代碼為：

復(fù)制代碼代碼如下:

 
<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> 

您可能感興趣的文章:

相關(guān)文章

JavaScript揭秘：實(shí)現(xiàn)自動(dòng)化連連看游戲
這篇文章主要介紹了JavaScript揭秘：實(shí)現(xiàn)自動(dòng)化連連看游戲的相關(guān)資料,需要的朋友可以參考下
2023-11-11
jQuery實(shí)現(xiàn)漸變下拉菜單的簡單方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)漸變下拉菜單的簡單方法,涉及jQuery鏈?zhǔn)讲僮骷癱ss樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
jquery iframe操作詳細(xì)解析
這篇文章主要是對(duì)jquery中iframe的操作進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-11-11
jQuery中hover方法搭配css的hover選擇器,實(shí)現(xiàn)選中元素突出顯示方法
下面小編就為大家?guī)硪黄猨Query中hover方法搭配css的hover選擇器,實(shí)現(xiàn)選中元素突出顯示方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-05-05
jquery實(shí)現(xiàn)先淡出再折疊收起的動(dòng)畫效果
這篇文章主要介紹了jquery實(shí)現(xiàn)先淡出再折疊收起的動(dòng)畫效果,通過jquery鏈?zhǔn)讲僮鲗?shí)現(xiàn)頁面元素的漸變折疊與展開功能,非常簡單實(shí)用,需要的朋友可以參考下
2015-08-08
jQuery ReferenceError: $ is not defined 錯(cuò)誤的處理辦法
今天開始要學(xué)習(xí)jQuery，寫第一個(gè)Hello Word時(shí)，居然jQuery ReferenceError: $ is not defined
2013-05-05
Jquery實(shí)現(xiàn)異步上傳文件
這篇文章主要為大家詳細(xì)介紹了Jquery實(shí)現(xiàn)異步上傳文件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
jQuery實(shí)現(xiàn)邊框動(dòng)態(tài)效果的實(shí)例代碼
這篇文章給大家分享了一個(gè)jQuery邊框動(dòng)態(tài)的效果，當(dāng)鼠標(biāo)移動(dòng)到邊框區(qū)域的時(shí)候，邊框會(huì)有個(gè)動(dòng)態(tài)的加載動(dòng)畫效果，實(shí)現(xiàn)的效果真的非常不錯(cuò)，下面來一起看看吧。
2016-09-09
簡單實(shí)現(xiàn)限制uploadify上傳個(gè)數(shù)
本文給大家分享的是在使用uploadify上傳文件或者圖片的時(shí)候，如何做到限制上傳個(gè)數(shù)的方法，十分的簡單方便實(shí)用，有需要的小伙伴可以參考下。
2015-11-11
跟著JQuery API學(xué)Jquery 之三篩選
跟著JQuery API學(xué)Jquery 之三篩選，相當(dāng)于條件判斷類型。
2010-04-04