ASP.NET 實現 Web 模態對話框兩種方案：AJAX ModalPopupExtender 與 jQuery UI Dialog

Web 表單中模態對話框是常見互動模式，本文介紹兩種實作：ASP.NET AJAX Control Toolkit ModalPopupExtender（伺服器端導向）與 jQuery UI Dialog（客戶端導向），含完整程式碼與樣式。

方案一：ModalPopupExtender（ASP.NET AJAX）

前置準備

• 安裝 AjaxControlToolkit 組件
• 頁面註冊：<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
• 放置 <asp:ScriptManager>

完整頁面程式碼

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ModalPopup.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<html><head>
<style>
.p_Login { width:230px; height:180px; padding:15px; background:#fff; border:2px solid #ccc; }
.Password { margin-left:15px; }
.ModalPopupBackground { background:#ddd; opacity:0.6; filter:alpha(opacity=60); }
</style>
</head><body>
<form id="form1" runat="server">
  <asp:ScriptManager ID="ScriptManager1" runat="server" />
  <asp:LinkButton ID="lbtn_Login" runat="server">登入</asp:LinkButton>

  <asp:Panel ID="p_Login" CssClass="p_Login" runat="server" Style="display:none">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
      <ContentTemplate>
        <p>用戶名：<asp:TextBox ID="UserName" runat="server" /></p>
        <p>密碼：<asp:TextBox ID="Password" TextMode="Password" CssClass="Password" runat="server" /></p>
        <p><asp:Button ID="Btn_Submit" Text="登入" OnClick="Btn_Submit_Click" runat="server" />
            <asp:Button ID="Btn_Cancel" Text="取消" OnClick="Btn_Cancel_Click" runat="server" /></p>
        <p><asp:Label ID="lbResult" runat="server" /></p>
      </ContentTemplate>
    </asp:UpdatePanel>
  </asp:Panel>

  <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
      PopupControlID="p_Login"
      TargetControlID="lbtn_Login"
      BackgroundCssClass="ModalPopupBackground" />
</form></body></html>

後端事件

protected void Btn_Submit_Click(object sender, EventArgs e)
{
    if (UserName.Text == "admin" && Password.Text == "123")
        lbResult.Text = "登入成功";
    else
        lbResult.Text = "帳號或密碼錯誤";
}

protected void Btn_Cancel_Click(object sender, EventArgs e)
{
    ModalPopupExtender1.Hide();
}

方案二：jQuery UI Dialog（現代推薦）

<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

<div id="loginDialog" title="用戶登入" style="display:none">
  <p>用戶名：<input type="text" id="txtUser" /></p>
  <p>密碼：<input type="password" id="txtPass" /></p>
</div>
<button id="btnOpenLogin">登入</button>

<script>
$(function() {
    $("#loginDialog").dialog({
        autoOpen: false,
        modal: true,
        width: 300,
        buttons: {
            "登入": function() {
                $.post("/api/login", { user: $("#txtUser").val(), pass: $("#txtPass").val() })
                    .done(function(r) { alert(r.msg); $(this).dialog("close"); });
            },
            "取消": function() { $(this).dialog("close"); }
        }
    });
    $("#btnOpenLogin").click(function() { $("#loginDialog").dialog("open"); });
});
</script>

兩方案比較