ASP.NET Popup 控件显示为多个嵌套的模态弹出窗口

• 下载源代码 - 400 KB

引言

我们都使用过 ModalPopupExtender 并了解其工作原理。它将详细信息部分显示为模态，这意味着我们除了详细信息部分之外，无法与页面上的其他任何部分进行交互。但是 ModalPopupExtender 存在一个问题。当我们显示第一个 ModalPopupExtender 上的另一个 ModalPopupExtender 时，它不会隐藏第一个 ModalPopupExtender。我们仍然可以与第一个 ModalPopupExtender 进行交互。

图 1。“父子对话框”

这里，第一个和第二个对话框都处于活动状态。我们可以访问两者。有时这会破坏应用程序逻辑。

因此，我在这里通过一个名为 ModelPopupRelation 的用户控件来解决这个问题。它将子模态弹出窗口设置在父模态弹出窗口之上。您可以添加多个 ModelPopupRelation 控件来设置模态弹出窗口之间的多个关系。我们可以将许多模态弹出控件嵌套到任何级别。

示例

<uc1:ModelPopupRelation ID="ModelPopupRelation1" runat="server" ParentModelPopupID="mpeFirstDialogBox"
   ChildModelPopupID="mpeSecondDialogBox" Start="false" />

背景

在开始 ModelPopupRelation 控件之前，我们应该先理清一些与模态弹出功能相关的事情。

<asp:Button ID="btntargetControlOfmpeFirstDialogBox" 
   runat="Server" Text="" Style="display: none;" />
<cc1:ModalPopupExtender ID="mpeFirstDialogBox" runat="server" 
  TargetControlID = "btntargetControlOfmpeFirstDialogBox" 
  PopupControlID = "pnlFirstDialogBox" CancelControlID="btnCloseFirstDialogBox" 
  Backgrou BehaviorID="mpeFirstDialogBox">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlFirstDialogBox" runat="server" BorderStyle="Solid" BorderWidth="1" 
             Style="width: 700px; background-color: White;  display: none; height: 400px;">
       <h1>  This is the first DialogBox</h1> 
</asp:Panel>

在上面的代码中，当用户单击按钮 btntargetControlOfmpeFirstDialogBox 或通过 Show() 方法动态显示 ModalPopupExtender 时，将显示 ModalPopupExtender。Button 控件 btntargetControlOfmpeFirstDialogBox 是 ModalPopupExtender 的 TargetControlID 属性所必需的。名为 pnlFirstDialogBox 的 Panel 显示详细信息部分。在 HTML 页面中，这会变成

<div id="pnlFirstDialogBox" style="left:624px; top: 27.5px; width: 35%; height: 400px; position: fixed; z-index: 10001;
  background-color: white;">[includes detail part as you specified]</div>"

在显示模态弹出窗口时阻止您与页面其他部分交互的背景元素在 HTML 中看起来像这样

<div style="left: 0px; top: 0px; width: 1920px; height: 455px; position: fixed; z-index: 10000;"
  id="mpeFirstDialogBox_backgroundElement"
  class="ModalPoupBackgroundCssClass"></div>

ModalPopupExtender 包含一个用于此背景元素的 BackgroundCssClass 属性。

ModelPopupRelation 用户控件

此控件实现了 ModalPopupExtender 不支持的功能。它将一个弹出窗口设置在另一个弹出控件之上。它提供了三个属性，您可以在下面的代码中看到。

<uc1:ModelPopupRelation ID="ModelPopupRelation1" runat="server" ParentModelPopupID="mpeFirstDialogBox" 
   ChildModelPopupID="mpeSecondDialogBox" 
   Start="false" 
/>

1. ParentModelPopupID：第一个 ModalPopupExtender 的 ID。显示第二个模态弹出窗口。
2. ChildModelPopupID：第二个模态弹出控件。
3. Start：默认情况下为 true。它允许控件在模态弹出窗口之间建立关系。

服务器端方法： 

为了实现这一点，有一些服务器端方法

1. private String GetControlClientID(String modelPopupDialogBoxID)

根据此函数获取模态弹出窗口的客户端 ID。我们在 JavaScript 代码（客户端脚本）中需要此 ID。

2. private Control ModalPopupExtenderControlSearch(Control _Control, String ModalPopupExtenderID)

此函数搜索页面中的模态弹出控件。

您可以在附加的项目中看到更多详细信息。两个函数都已完全注释。

客户端方法

1. function EndRequestHandler<%=FunctionUniqueName %>(sender, args)

此函数在异步回发完成且控件已返回到浏览器后调用。此函数调用 CreateRelation() 函数。

2. function  CreateRelation<%=FunctionUniqueName %>(ParentModelPopupID, ChildModelPopupID)

此函数接受两个参数，即父子模态弹出控件的客户端 ID。它设置子模态弹出控件的 z-index。这是此用户控件的主要逻辑。

3. function Get_PopUpContrl<%=FunctionUniqueName %>(PopupControlID)

此函数借助 PopupControlID 搜索模态弹出控件。

主要逻辑：

现在我来描述用户控件的主要逻辑。当 ModalPopupExtender 呈现时，它会生成 z-index。如下图所示。

图 2。“父对话框”

在此图中，我们可以看到 ModalPopupExtender 为背景控件（div HTML 控件）生成了 z-index：10000。div HTML 控件覆盖了模态弹出窗口的后端控件。这是 backgroundElement 控件的呈现 HTML。

背景元素

<div style="left: 0px; top: 0px; width: 1920px; height: 455px; position: fixed; z-index: 10000;"
  id="mpeFirstDialogBox_backgroundElement"
  class="ModalPoupBackgroundCssClass"></div>

前景元素

<div id="pnlFirstDialogBox" style="left: 624px; top: 27.5px; width: 35%; 
   height: 400px; position: fixed; z-index: 10001; background-color: white;">
[includes detail part as you specified]
</div> 

图 3。“父子对话框”

如上图（图 3）所示，我们需要为对话框和背景元素建立“N -> (N+1) -> (N+2) -> (N+3) 的 z-index 关系。

概念

在文档的最后，我再次想描述此控件的概念。我们需要为所有以嵌套方式打开的对话框设置一系列 z-index。您可以添加自己的逻辑来设置所有对话框及其背景元素的 z-index。

 

图 4。“父子对话框”