ASP.Net中Javascript模态框点击弹出后瞬间消失问题求助

尝试实现点击按钮弹出模态框（Modal）功能，但模态框刚显示就瞬间消失，无法用于收集数据。使用ASP.Net控件与Javascript实现模态框弹出逻辑。

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="Shows.aspx.cs" Inherits="BeanJJ.Shows" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

Your BEANJJ shows
    <p class="expressions">ADD, UPDATE or DELETE shows in  this management panel</p>
    <br />
    <button class="add-show"><span style="color:cornflowerblue; font-size:2rem;">&#43;</span> <%--Add Show--%></button><%--//yet to fix class names--%>
    <button class="add-show"><span style="color:darkseagreen;font-size:2rem">&infin;</span> <%--Update Show--%></button>
    <button class="add-show"><span style="color:red;font-size:2rem;">&#8259;</span><%--Delete Show--%></button>
    <br />
    <div class="addshow hidden">
        <p class="expressions">Enter the details of the show and save.</p>
    <br />
    <label for="email">Show name</label>
    <input type="text" runat="server" id="showname" name="showname" placeholder="Show name" />
    <br />
    <label for="platform">Platform</label>
    <input type="text" runat="server" id="platform" name="platform" placeholder="Amazon/Netflix/HBO...etc"  />
    <br />
    <label for="partswatched">Parts Watched</label>
    <input type="text" runat="server" id="seasonswatched" name="seasonswatched" placeholder="Number of seasons watched" />
    <br />
    <label for="Note">Note</label>
    <input type="text" runat="server" id="note" name="password" placeholder="Optional note" />
    <br />
    <label for="Completed">Whole show watched/</label>
    <input type="text" runat="server" id="completed" name="completed" placeholder="Have you completed the show?" oninvalid="setCustomValidity('Enter number of seasons watched !!')" />
    <br />
    <label id="lblerror" name="lblerror" class="info" runat="server"></label>
    <br />
        </div>
    <div class="overlay hidden"></div>
</fieldset>
</asp:Content>

'use strict';
const addshow = document.querySelector('.add-show');
const modal = document.querySelector('.addshow');
const overlay = document.querySelector('.overlay');

//function for showing overlay to blur background when modal pops up
const showOverlayToBlurBackground = function () {
    overlay.classList.remove('hidden');
}

//function to show modal pop ups will be used by more than one modal so it could be refined after I learn more JS

const showModal = function () {
    modal.classList.remove('hidden');
    showOverlayToBlurBackground();
}

addshow.addEventListener('click', showModal);

问题根源 #

ASP.NET环境中，<button>标签未指定type属性时，默认会被解析为type="submit"，点击后触发表单提交导致页面刷新，模态框刚显示就被刷新消失。同时当前JS仅绑定了第一个.add-show按钮的点击事件，另外两个按钮点击无响应。

修复步骤 #

1. 修改按钮类型：给所有.add-show按钮添加type="button"，阻止默认表单提交行为：

<button type="button" class="add-show"><span style="color:cornflowerblue; font-size:2rem;">&#43;</span> <%--Add Show--%></button>
<button type="button" class="add-show"><span style="color:darkseagreen;font-size:2rem">&infin;</span> <%--Update Show--%></button>
<button type="button" class="add-show"><span style="color:red;font-size:2rem;">&#8259;</span><%--Delete Show--%></button>

2. 绑定所有按钮的点击事件：修改JS代码，选中所有.add-show按钮并逐个绑定事件：

'use strict';
const addshowButtons = document.querySelectorAll('.add-show');
const modal = document.querySelector('.addshow');
const overlay = document.querySelector('.overlay');

const showOverlayToBlurBackground = function () {
    overlay.classList.remove('hidden');
}

const showModal = function (e) {
    // 额外保险：阻止默认行为，防止意外提交
    e.preventDefault();
    modal.classList.remove('hidden');
    showOverlayToBlurBackground();
}

// 给每个按钮绑定点击事件
addshowButtons.forEach(button => {
    button.addEventListener('click', showModal);
});

3. 可选：添加模态框关闭逻辑：给遮罩或关闭按钮绑定事件，重新添加hidden类隐藏模态框和遮罩：

// 添加关闭函数
const hideModal = function () {
    modal.classList.add('hidden');
    overlay.classList.add('hidden');
}

// 点击遮罩关闭模态框
overlay.addEventListener('click', hideModal);

// 按ESC键关闭模态框
document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
        hideModal();
    }
});

内容的提问来源于stack exchange，提问作者Kutlo Ranno