【jQuery套件】Impromptu Alert、Confirm替代方案

2011-07-13

14818
0
jQuery套件
2015-11-29

[JQuery]Impromptu Alert、Confirm替代方案

我們知道，如果要彈跳視窗用Javascript Alert就可以達成。

而我們也常常在GridView或著是一些Button做刪除動作時，

利用Javascript Confirm來做到刪除前提醒的動作。

但是，你有遇過客戶對你說...........我的彈跳視窗字要大一點，要用紅色的字的要求嗎！？

如果有，而且你還沒開發出來，就借過來看看。

稍微搜尋一下，應該會發現很多人都說....無法去改變字體、顏色這件事情！！

而，也會說使用自訂DIV來達成。

沒錯.....我們等等就是要用自訂的Div來達成。

但是，當今世上那麼熱門的Jquery+套件怎麼可能沒想到這點呢！？

今天就要推薦這款：Impromptu

官方網站：Impromptu

參考網站：http://www.clientsideasp.net/2009/06/16/showing-beautiful-message-boxes-in-aspnet-web-forms-using-jquery-impromptu/

使用上其實非常簡單。

步驟一：

基本上你要有Jquery的JS檔、Impromptu的JS檔(開發版下載點)、Impromptu的CSS檔(按此下載)

步驟二：引用JS跟CSS

<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-impromptu.3.1.js"></script>
<link rel="Stylesheet" type="text/css" href="CSS/impromptu.css" />

步驟三：Alert範例，就是這樣簡單。

<button onclick="$.prompt('Example 1')" title="Example 1">Example 1</button>

步驟四：Confirm範例，官方是說，必須有兩個Button，一個是看的見的(呼叫Jquery)，一個是看不見的(處理真正Click事件)，當看的見的按下確認鍵後才呼叫看不見的Button的Click事件。

經過我小小測試後，發現其實可以跟我們平常一樣，只運用的一Button。如下：

<script language="javascript" type="text/javascript">

  

       function confirmSubmit() {

           $.prompt('Are you sure you want to submit?'

                   , { buttons: { Ok: true, Cancel: false },

                       callback: confirmSubmitResult

                   });

           return false;

       }

  

       function confirmSubmitResult(v, m, f) {

           if (v) //post back if the user clicked OK

               $('#<%= btnSubmit.ClientID %>').click();

       }

   
</script> 

  

  

//先做return confirmSubmit();這個部分，若回傳True則上訴javascript會再做btnSubmit_Click

<asp:Button runat="server" Text="Confirm" ID="btnSubmit" OnClientClick="return confirmSubmit();"

            OnClick="btnSubmit_Click" />