ASP.NET Popup 控制項使用教學：模擬 MSN 風格訊息提示

控制項特色

• 模仿 MSN Messenger 彈出視窗風格，支援拖曳移動。
• 多種預設視覺樣式，可自訂所有顏色屬性。
• 相容主流瀏覽器 (IE、Firefox、Opera、Chrome)。
• 支援 HTML 內容、圖示、超連結。
• 三種動作模式：訊息視窗、開啟連結、引發伺服器端事件。

核心屬性

三種動作模式詳解

1. MessageWindow (預設)

點擊觸發元素後，彈出新瀏覽器視窗顯示 `Text` 內容。

2. OpenLink

執行 `Link` 指定的 JavaScript 或導向 URL。可設定 `LinkTarget` 控制開啟方式。
生成代碼類似：`Link`

3. RaiseEvents (伺服器端事件)

觸發兩個伺服器端事件：

• `LinkClicked`：使用者點擊彈出視窗中的連結時。
• `PopupClosed`：使用者點擊關閉按鈕 (X) 時。

適合需在伺服器端處理業務邏輯 (如記錄日誌、更新資料庫) 的情境。

安裝與使用步驟

1. 下載控制項組件 (`.dll`)。
2. Visual Studio → 工具箱右鍵 → 「選擇項目」 → 瀏覽選取 DLL。
3. 工具箱出現控制項圖示，拖曳至頁面。
4. 設定屬性 (如 `ActionType="RaiseEvents"`、`Text="確定刪除?"`)。
5. 在程式碼後置處理事件：

protected void Popup1_LinkClicked(object sender, EventArgs e)
{
 // 使用者點擊彈出視窗連結
 lblResult.Text = "已確認";
}

protected void Popup1_PopupClosed(object sender, EventArgs e)
{
 // 使用者關閉視窗
 lblResult.Text = "已取消";
}

客戶端 JavaScript API

// 手動顯示/隱藏
$find("Popup1").show();
$find("Popup1").hide();

// 動態設定內容
$find("Popup1").set_text("新訊息");
$find("Popup1").set_link("https://example.com");

注意事項

• 舊版瀏覽器不支援 CSS Filter (陰影、半透明) 時外觀會簡化。
• 大量使用 Popup 會增加頁面 DOM 節點，影響效能，建議按需動態建立。
• 行動裝置觸控事件需額外處理 (拖曳、點擊穿透)。

現代替代方案

現代 Web 開發建議使用純前端方案：

• Bootstrap Modal / SweetAlert2 / Toastr / Notyf
• 原生 `
  ` 元素 (Chrome 37+、Firefox 53+、Edge 79+)
• 配合 ASP.NET AJAX `ModalPopupExtender` (舊專案)

伺服器端控制項耦合度高、難以客製化、不利前後端分離，新專案請優先考慮前端框架方案。