如何在ModalPopupExtender弹窗显示后保持页面可操作？

你的需求是可行的，但默认的ModalPopupExtender是模态弹窗，会通过背景遮罩阻止用户操作页面其他元素。要实现非模态效果，可通过以下两种方式调整：

方法1：修改现有ModalPopupExtender配置，移除背景拦截 #

默认情况下，ModalPopupExtender会生成覆盖整个页面的背景遮罩层，拦截所有点击事件。你可以通过CSS让遮罩层不拦截点击：

1. 保留原有的backgroundcssclass="ModalPopupBG"，修改对应的CSS样式：

.ModalPopupBG {
    background-color: rgba(0, 0, 0, 0.3); /* 可选：保留半透明背景 */
    pointer-events: none; /* 关键：允许点击穿透到页面元素 */
}

2. 或者直接删除ModalPopupExtender标签中的backgroundcssclass属性，这样就不会生成遮罩层，页面背景自然可以操作。

方法2：改用手动JS控制弹窗（更灵活的非模态实现） #

如果需要完全脱离模态限制，建议直接用JavaScript控制Panel的显示/隐藏，同时保留拖拽功能：

1. 移除ModalPopupExtender控件，修改Button1的点击事件：

<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="showPopup(); return false;" />

2. 添加JavaScript代码控制弹窗显示隐藏，以及原生拖拽功能：

// 显示弹窗
function showPopup() {
    const panel = document.getElementById('<%= Panel1.ClientID %>');
    panel.style.display = 'block';
}

// 隐藏弹窗
function hidePopup() {
    const panel = document.getElementById('<%= Panel1.ClientID %>');
    panel.style.display = 'none';
}

// 原生JS实现拖拽功能（针对PopupHeader）
document.addEventListener('DOMContentLoaded', function() {
    const header = document.getElementById('PopupHeader');
    const panel = document.getElementById('<%= Panel1.ClientID %>');
    let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;

    header.onmousedown = dragMouseDown;

    function dragMouseDown(e) {
        e = e || window.event;
        e.preventDefault();
        pos3 = e.clientX;
        pos4 = e.clientY;
        document.onmouseup = closeDragElement;
        document.onmousemove = elementDrag;
    }

    function elementDrag(e) {
        e = e || window.event;
        e.preventDefault();
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        panel.style.top = (panel.offsetTop - pos2) + "px";
        panel.style.left = (panel.offsetLeft - pos1) + "px";
    }

    function closeDragElement() {
        document.onmouseup = null;
        document.onmousemove = null;
    }
});

3. 调整Panel的CSS，确保它是绝对定位（方便拖拽）：

#<%= Panel1.ClientID %> {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 其他原有样式保持不变 */
}

注意事项 #

• 方法1保留了ModalPopupExtender的拖拽和按钮绑定功能，只是去掉了背景拦截，适合快速修改现有代码。
• 方法2完全自定义弹窗行为，灵活性更高，适合需要更多自定义交互的场景。

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