asp:Panel内asp:CheckBox无法勾选/取消勾选问题求解

复选框没法勾选的核心问题是你自己加的dialog-mask遮罩层挡住了弹窗内容，所有点击事件都被遮罩截获了，另外还有几处配置bug会导致弹窗运行异常：

• 你在myPanel1容器里先放了全屏遮罩#dialog-mask，又没给遮罩和内容区设置正确的定位、层级值，遮罩默认会盖在后面的#dialog内容区上面，鼠标点复选框的时候实际点到的是透明遮罩，根本触发不到复选框。
• 后端给HyperLink绑点击事件的时候，没接收JS函数的return false返回值，点链接会触发默认的#锚点跳转，页面直接滚到顶部，甚至触发意外回发。
• ModalPopupExtender的TargetControlID直接绑定了弹窗面板本身，不符合控件的使用规则，很容易导致z-index层级计算出错。
• 你手动给myPanel1加了display:none的内联样式，会和ModalPopupExtender自带的显示/隐藏逻辑冲突。

1. 处理多余的遮罩层 #

ModalPopupExtender本身已经会自动生成带modalBackground样式的全屏半透明遮罩，完全不需要你自己额外加dialog-mask节点，直接把<div id="dialog-mask"></div>这行删掉就行，从根源上避免遮罩挡内容的问题。
如果一定要保留自定义遮罩，就给遮罩和内容区加下面的样式，明确层级关系：

#dialog-mask {
    position: fixed;
    inset: 0;
    z-index: 1;
}
#dialog {
    position: relative;
    z-index: 2;
    /* 原有弹窗样式保留即可 */
}

2. 修正点击事件的返回值 #

后端绑定HyperLink点击事件的代码，加上return接收JS的返回值，阻止默认跳转行为：

HyperLink link = (HyperLink)e.Row.FindControl("Button2");
link.Attributes.Add("onclick", String.Format("return ShowApproveModalPopup('{0}');", Id));

右上角的关闭图片按钮也要加返回值，不然点关闭会触发回发：

<asp:ImageButton ID="CloseImage" runat="server" ImageUrl="~/Images/close.gif" OnClientClick="HideModalPopup(); return false;" />

3. 修正ModalPopupExtender配置 #

在页面里加一个隐藏的按钮作为ModalPopupExtender的目标触发控件，不要直接把弹窗面板设为TargetControlID，同时删掉myPanel1上手动加的display:none样式：

<%-- 隐藏的触发按钮，不要删除 --%>
<asp:Button ID="HiddenModalBtn" runat="server" style="display:none;" />

<asp:Panel ID="myPanel1" runat="server" Height="304px" Width="425px">
    <%-- 面板原有内容保留，去掉Style="display: none;"属性 --%>
</asp:Panel>

<ajaxToolkit:ModalPopupExtender ID="myPanel1ModalPopupExtender" runat="server" 
    PopupControlID="myPanel1"
    TargetControlID="HiddenModalBtn" 
    BackgroundCssClass="modalBackground" 
    CancelControlID="CancelButton" 
    OnCancelScript="HideModalPopup()">
</ajaxToolkit:ModalPopupExtender>

改完之后刷新页面重新点开弹窗，复选框就能正常勾选、取消勾选了。如果还是点不动，直接按F12打开开发者工具，用元素选择器点复选框的位置，看选中的是不是遮罩类节点，把对应节点的z-index调得比内容区低即可。

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