使用半透明的Div遮蓋表單防止重複送出(Submit)範例
一般表單當送出後,需要執行比較長的時間,往往畫面留著,有些使用者等不及會再按看看,造成表單重複送出。其實這個問題可以用一個絕對位置的div搭配簡單的JavaScript就可以把表單遮蓋,讓等待的人按不到按鈕。
程式很簡單,先看一下畫面的部分:
測試
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="divBlock.style.display='';" />
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
<div id="divBlock"
style="border-style: solid; border-width: 1px; z-index: 1; position: absolute; top: 3px; left: 4px; height: 142px; width: 262px; background-color: #808080;filter: Alpha(Opacity=80);display:none;">
<font color="yellow" size="7">處理中......</font>
</div>
再來為了按了按鈕可以模擬執行較久,所以寫了個簡單的迴圈,讓她辛苦一點跑久一點
Dim y As Integer
Dim c As Integer = 0
'跑一個比較久的迴圈
For y = 0 To 1000000000
c += 1
Next
Me.Label1.Text = c.ToString & "--" & Now.ToString
End Sub
就這麼簡單,並且在ASP,PHP,JSP,...都可以用相同的技巧唷
^_^
以下是簽名:
- 歡迎轉貼本站的文章,不過請在貼文主旨上加上【轉貼】,並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】,感恩大家的配合。
- 小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫,如果您需要C#的Code,也許您可以試著用線上的工具進行轉換,這裡提供幾個參考
Microsoft MVP Visual Studio and Development Technologies (2005~2019/6) | topcat Blog:http://www.dotblogs.com.tw/topcat |