2010年7月16日 星期五

透過ASP.NET AJAX 4 Client Libraries實現 Modal Popup Window

現在很多網站都導入了AJAX技術,透過AJAX技術在網頁上實現類似Windows的強制回應視窗(Modal Popup Window)效果,像FaceBook、Google都有廣泛的使用這些功能。

底下連結的這個範例介紹如何透過ASP.NET AJAX Client Libraries,不需要引用特定.dll,只需要參考MS CDN即可輕鬆在網頁上建立這樣的凸顯式強制回應視窗功能。

程式碼約莫如下:

< script type="text/javascript" >
Sys.debug = true;
Sys.require([Sys.components.watermark, Sys.components.modalPopup], function () {
$("#Button1").modalPopup({
PopupControlID: "window", //視窗物件名稱
OkControlID: "buttonOK", //設定OK鈕物件
CancelControlID: "buttonCancel", //設定OK鈕物件
OnOkScript: okayWasClicked, //按下Cancel鈕要做的事情
OnCancelScript: cancelWasClicked, //按下Cancel鈕要做的事情
BackgroundCssClass: "modalBackground" //背景顏色
});
$("#UserName").watermark("<請輸入姓名>", "watermark");
$("#Pwd").watermark("<請輸入密碼>", "watermark");
});
//按下OK鈕要做的事情
function okayWasClicked() {
Sys.get("#Label1").innerText = "返回確定";
}
//按下Cancel鈕要做的事情
function cancelWasClicked() {
Sys.get("#Label1").innerText = "返回取消";
}

完成程式碼請[下載]

沒有留言: