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函數用於顯示和隱藏彈跳視窗。請注意，這只是一個基本的範例，實際應用可能需要根據您的需求進行調整。
留言
張貼留言