ASP.Net WebForm實作Open Dialog視窗互動
ASP.Net WebForm實作Open Dialog視窗互動
aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="YourNamespace.Default" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><title>彈跳視窗範例</title><style>#popup {display: none;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);border: 1px solid #ccc;background-color: #fff;padding: 20px;z-index: 1000;width: 300px; /* 調整寬度 */}#popupTitle {font-size: 18px;font-weight: bold;margin-bottom: 10px;}#popupContent {margin-bottom: 20px;}#popupButtons {text-align: right;}#popupButtons button {margin-left: 10px;}</style></head><body><form id="form1" runat="server"><asp:ScriptManager runat="server"></asp:ScriptManager><div><!-- 主要內容區域 --><asp:Panel ID="MainContent" runat="server"><asp:Button ID="btnShowPopup" runat="server" Text="顯示彈跳視窗" OnClientClick="showPopup(); return false;" /></asp:Panel><!-- 彈跳視窗 --><div id="popup"><div id="popupTitle">彈跳視窗標題</div><div id="popupContent"><asp:Label ID="lblMessage" runat="server" Text="確定要執行此操作嗎？"></asp:Label></div><div id="popupButtons"><asp:Button ID="btnOK" runat="server" Text="確定" OnClick="btnOK_Click" /><asp:Button ID="btnCancel" runat="server" Text="取消" OnClientClick="hidePopup(); return false;" /></div></div></div><!-- 在這裡加入其他內容或控制項 --></form><script type="text/javascript">function showPopup() {document.getElementById('popup').style.display = 'block';}function hidePopup() {document.getElementById('popup').style.display = 'none';}</script></body></html>
aspx.cs
using System;using System.Web.UI;namespace YourNamespace{public partial class Default : Page{protected void Page_Load(object sender, EventArgs e){// 此處可以加入其他初始化邏輯}protected void btnOK_Click(object sender, EventArgs e){// 在畫面上的textbox1顯示"OK"TextBox textbox1 = (TextBox)MainContent.FindControl("textbox1");if (textbox1 != null){textbox1.Text = "OK";}// 關閉彈跳視窗ScriptManager.RegisterStartupScript(this, GetType(), "hidePopup", "hidePopup();", true);}}}
上述程式碼中，我們使用了ASP.NET的Panel控制項來包裝主要內容區域，並使用CSS和JavaScript來實現彈跳視窗的樣式和顯示/隱藏效果。在彈跳視窗中，我們有兩個按鈕（OK和Cancel），並在btnOK_Click事件中處理按下OK按鈕的邏輯。在JavaScript中的showPopup和hidePopup函數用於顯示和隱藏彈跳視窗。請注意，這只是一個基本的範例，實際應用可能需要根據您的需求進行調整。
留言
張貼留言