ASP删除按钮点击时JavaScript弹窗闪显消失，需触发删除事件时正常显示

嘿，我最近在处理应用里的DeleteConfirmation删除确认功能时碰到个头疼的问题：点击ASP.Delete按钮的时候，JavaScript弹窗确实弹出来了，但刚闪一下就消失了。有意思的是，如果在页面加载时直接调用弹窗函数，它能正常显示；可就是点击删除按钮触发删除方法/事件的时候，弹窗留不住。

相关的JavaScript代码片段如下：

var message = "Please help"; 
function confirmDeletePop(message) { 
    popmodal('/' + getAppPath() + '...');
    // 这里是自定义弹窗的完整逻辑
}

问题原因分析 #

这事儿大概率是ASP的Delete按钮默认是提交按钮，点击它之后会立刻触发页面的提交刷新动作——弹窗刚弹出来，页面就刷新了，自然就看不到了。而页面加载时调用函数，没有触发页面提交，所以弹窗能正常显示。

解决办法 #

这里给你两个可行的方向，按需选择：

方案1：用确认逻辑阻止默认提交

修改你的弹窗函数，让它返回用户的确认结果，同时在按钮的点击事件里返回这个结果，以此阻止默认的页面提交：

function confirmDeletePop(message) {
    // 如果用原生confirm弹窗
    var userConfirmed = confirm(message);
    // 如果是自定义popmodal，需要改成同步确认逻辑，或者用方案2的异步方式
    return userConfirmed;
}

然后修改ASP按钮的OnClientClick属性：

<asp:Button ID="DeleteBtn" runat="server" Text="Delete" OnClientClick="return confirmDeletePop('确定要删除吗？');" />

这样用户点击“取消”时，函数返回false，会阻止按钮的默认提交；点击“确认”时返回true，才会执行后端的删除方法。

方案2：自定义弹窗+异步触发提交

如果你的popmodal是异步的自定义模态框，那得先阻止按钮的默认提交，等用户确认后再手动触发提交：

function confirmDeletePop(message, submitBtn) {
    // 调用自定义弹窗
    popmodal('/' + getAppPath() + '...', {
        // 假设弹窗有确认按钮的回调事件
        onConfirm: function() {
            // 用户确认后，手动触发按钮的提交动作
            submitBtn.click();
        },
        onCancel: function() {
            // 用户取消，弹窗关闭即可
        }
    });
    // 先返回false，阻止默认提交
    return false;
}

对应的ASP按钮写法：

<asp:Button ID="DeleteBtn" runat="server" Text="Delete" OnClientClick="return confirmDeletePop('确定要删除吗？', this);" />

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