为何JavaScript模态弹窗点击Alert确定后自动关闭？后端传值咨询

一、为什么Alert确定后弹窗会关闭？ #

这种情况最常见的原因有两个，我帮你梳理下：

• 按钮默认触发了表单提交/页面回发：如果你的Alert按钮放在<form>标签里，且没指定type="button"（默认是submit类型），点击按钮时会先执行Alert，确定后浏览器会继续触发表单提交的默认行为，页面刷新导致模态弹窗直接消失。
• 模态框按钮绑定了关闭逻辑：如果用的是Bootstrap这类UI库的模态框，按钮可能自带data-dismiss="modal"属性，或者JS里绑定了关闭弹窗的事件。Alert是阻塞式弹窗，点击确定后会继续执行后续代码，也就是触发模态框的关闭逻辑。

解决办法很简单：

• 给按钮明确指定type="button"，避免触发表单提交：<button type="button" onclick="yourFunction()">确定</button>
• 如果是JS绑定的事件，在Alert后检查是否有不必要的关闭代码，或者在事件里添加event.preventDefault()阻止默认行为（针对表单提交场景）。

二、将文本框数据传递到后端（Code Behind）的思路 #

从你提到的“Code Behind”来看，应该是ASP.NET Web Forms项目，给你几个实用方案：

1. 传统服务器控件回发方案 #

直接把模态框里的文本框设为服务器控件：

<asp:TextBox ID="txtModalInput" runat="server"></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" Text="提交" OnClick="btnSubmit_Click" />

然后在Code Behind里直接获取值进行处理：

protected void btnSubmit_Click(object sender, EventArgs e)
{
    string inputValue = txtModalInput.Text;
    // 这里写你的后端逻辑，比如存储数据、调用接口等
}

注意：要确保模态框的HTML代码放在页面的<form runat="server">标签内部，否则服务器控件无法正常回发。

2. AJAX异步提交方案（推荐，无页面刷新） #

这种方式体验更好，不会刷新整个页面：

• 前端用JS获取文本框值，通过AJAX发送到后端的WebMethod：

function submitModalData() {
    var inputValue = document.getElementById("txtModalInput").value;
    fetch('YourPage.aspx/SubmitData', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json; charset=utf-8'
        },
        body: JSON.stringify({ input: inputValue })
    })
    .then(response => response.json())
    .then(data => {
        // 后端处理成功后关闭模态框并提示
        $('#yourModal').modal('hide');
        alert('数据提交成功！');
    })
    .catch(error => console.error('提交失败:', error));
}

• 后端在Code Behind里添加静态WebMethod（需加[WebMethod]特性）：

[System.Web.Services.WebMethod]
public static string SubmitData(string input)
{
    // 处理输入的数据，比如写入数据库
    return "success";
}

3. 普通表单提交方案 #

如果不想用服务器控件，也可以用普通HTML表单提交：

<form action="YourPage.aspx" method="post">
    <input type="text" name="modalInput" id="txtModalInput" />
    <button type="submit" onclick="alert('确认提交？');">提交</button>
</form>

然后在Code Behind里通过Request对象获取值：

protected void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack)
    {
        string inputValue = Request.Form["modalInput"];
        // 执行后端处理逻辑
    }
}

内容的提问来源于stack exchange，提问作者Penelope Estes