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

作者： David - 7月 16, 2010

現在很多網站都導入了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 = "返回取消";
        }