■Post Back処理中にWebページをロックする
サンプル
Header部
<style type="text/css">
.lockOff
{
display: none;
visibility: hidden;
}
.lockOn
{
display: block;
visibility: visible;
position: absolute;
z-index: 999;
top: 0px;
left: 0px;
width: 105%;
height: 105%;
background-color: #ccc;
text-align: center;
padding-top: 20%;
filter: alpha(opacity=75);
opacity: 0.75;
}
.lockOn div
{
width: 55%;
background-color: white; /* #969 */
color: black; /* White */
font-size: small;
border: dotted 1px White;
padding: 9px;
margin-left: auto;
margin-right: auto;
}
</style>
<link type="text/css" rel="stylesheet" href="./jquery/themes/base/jquery.ui.all.css" />
<script type="text/javascript" src="./jquery/jquery-1.6.2.js"></script>
<script type="text/javascript">
$(function () {
$(".btnSubmit").click(function () {
// 検証コントロールがあるかどうか確認
if (typeof (Page_ClientValidate) == 'function') {
// エラーを検出したかどうか確認
if (Page_ClientValidate() == false) {
return false;
}
}
$('.lockOff').addClass("lockOn");
});
});
</script>
Body部
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ErrorMessage="Required Error!" ControlToValidate="TextBox1"></asp:RequiredFieldValidator>
<br />
<asp:Button ID="Button1" runat="server" CssClass="btnSubmit" Text="Click Me!" />
<div id="divProgress" class="lockOff">
<div>
<img src="Images/loading.gif" alt="" />
処理中...
</div>
</div>
コードビハインド
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Threading.Thread.Sleep(3000)
If Me.IsPostBack Then
Me.Label1.Text = Me.TextBox1.Text & "が指定"
End If
End Sub
問題点
* アニメgifが動かない
