【JQuery】BlockUI燈箱(LightBox)效果
使用JQuery前，需要引用Jquery元件及BlockUI元件。
BlockUI燈箱與先前介紹的FancyBox燈箱功能效果是一樣的，但就擴充性應用來說，FancyBox燈箱略勝一籌，本人也比較偏愛使用，但為何要介紹呢？
因為工作上維護別人寫的系統，進而去了解熟悉BlockUI燈箱插件語法，詳細語法詳見官網。
● 載入目前進度
HTML(參考)：
<!-- 載入目前進度 start -->
<div id="maskprogress" class="maskprogress"> //此DIV 預設隱藏 display:none;
<table style="text-align:center; width:35%; height:100%; vertical-align:middle">
<tr>
<td style="height:45%">
</td>
</tr>
<tr>
<td style="background-color:White; height:10%; vertical-align:middle; text-align: center;">
<asp:Image ID="img_load" runat="server" ImageUrl="~/images/ajax-loading.gif" /> //載入圖片
</td>
</tr>
<tr>
<td style="height:45%">
</td>
</tr>
</table>
</div>
<!-- 載入目前進度 end -->
Javascript(參考)：
$.blockUI({ message: $('#maskprogress') }); //載入目前進度
● 透過ASPX方式
ASPX(參考)：
<div class="sexyborder" id="sexyborder">
<table class="fancytable" width="550px">
<!-- 省略之 -->
<tr ><td colspan="2" Height="10px"></td></tr>
<tr ><td colspan="2" align="center"><asp:ImageButton ID="ImageButton2" runat="server"
ImageUrl="~/Bullit/images/close.png" OnClientClick="eval('$.unblockUI();');return false;"/></td> <!-- 關閉按鈕 -->
</tr>
</table>
</div>
CS(參考)：
//Jquery blockUI
Msg = @" $.blockUI({
css: { width: '820px', height: '650px', left: '15%' },
message: $('#sexyborder')
});";
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "alert", Msg, true);
CSS(參考)：
<style type="text/css">
/*提供部分CSS*/
.sexyborder{
border:1px solid #0066cc; padding:5px;margin:20px auto;
width:600px; display:none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
</style>
參考資源：
BlockUI官網
BlockUI Plugin - 功能完善的頁面、訊息遮罩
留言
張貼留言