65.9K
CodeProject 正在变化。 阅读更多。
Home

模态弹出窗口覆盖

nereo.lopez
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.61/5 (17投票s)

2011年6月13日

CPOL

4分钟阅读

viewsIcon

84322

downloadIcon

4172

如何使用叠加层创建模态弹出窗口。

引言

在本文中，我将分享如何使用 CSS 和 AJAX 产生与 ASP.NET 中 AJAX Control Toolkit 中的 ModalPopUpExtender 相同的效果。我们将能够创建主/细节、查找、错误消息，或者任何其他你想要使用的东西！ 已经有很多方法了，所以可能没有什么新东西... 只是我自己的做法 :-)

背景

好吧，如果 AJAX Control Toolkit 中有一个 ModalPopUpExtender，为什么不使用它并做一些不同的事情呢？ 我的情况对此来说真是痛苦。 让我解释一下。

我有母版页、网页、内容占位符和用户控件。 当它们被用作“弹出窗口”时，用户控件会被动态加载。 我开始搜索如何将它们转换成“弹出窗口”，发现了两种不同的方法，我认为它们会起作用。

第一次尝试：ModalPopUpExtender。 我准备好了一切：CSS 背景类、PopUpPanel、OkControl、CancelControl 等等。它看起来很棒...但是...每当我点击或使用任何会引起回发的控件时，弹出窗口就会隐藏。 好吧，有一个解决方法可以使用 JavaScript 来阻止控件本身引起回发，或者我们可以尝试在回发后重置弹出窗口的“状态”（隐藏或显示）... 这对我来说太费劲了。 如果你还记得，我正在动态地将用户控件加载到 PopUpPanel 中... 所以我决定使用第二个选项。

第二次尝试：好吧，第二次尝试是使用简单的 HTML 和 CSS。 我找到了一个例子，其中使用两个 Div 和 CSS 就可以实现。 这对我来说很熟悉，因为这有时是我将 UpdateProgress 显示为覆盖页面的模态弹出层的方式... 我之前怎么没想到呢？ 好吧，在这种情况下，它需要的不仅仅是这些，它还需要一个 JavaScript 函数，该函数将在需要时显示和隐藏 Div。 所以，我开始尝试以不同的方式从代码中调用 JavaScript 函数，但由于我的情况（用户控件在 Panel 内，Panel 在 UpdatePanel 内，UpdatePanel 在 WebPage 的 ContentHolder 内，WebPage 在 MasterPage 内），我遇到了服务器尝试解析请求的错误。 所以，由于我无法更改该结构以避免错误，我认为使用 AJAX 可能会在做了一些更改后起作用，而这正是我所做的。

代码和解决方案

让我们在 HTML 的末尾添加一个 UpdatePanel（当然，在 content 标签内）。 现在，在 UpdatePanel 的 ContentTemplate 中，我们只需要添加两个面板，一个用于叠加层，一个用于弹出窗口。

第二个面板（在下面的示例中为 panelPopUpPanel）有一个嵌套面板，我用它来创建“标题”栏。 在下面的示例中，它只包含“关闭”按钮。 在这个嵌套面板之后（仍然在 PopUpPanel 内），添加你想要显示的内容（在下面的示例中，它包含一个名为 ucPopUpUsersQuickSearch 的用户控件）。

<asp:updatepanel id="upPopUps" runat="server" updatemode="Always">
    <contenttemplate>
    <asp:panel id="panelOverlay" runat="server" 
           class="Overlay" visible="false">

    <asp:panel id="panelPopUpPanel" runat="server" 
              class="PopUpPanel" visible="false">
        <asp:panel id="panelPopUpTitle" runat="server" 
                   style="width: 100%; height: 20px; text-align: right; ">
            <asp:imagebutton id="cmdClosePopUp" 
               runat="server" imageurl="~/Images/Close.png">
        </asp:imagebutton></asp:panel>
        <uc:usersquicksearch id="ucPopUpUsersQuickSearch" 
                runat="server" visible="false">
    </uc:usersquicksearch> </asp:panel>
    </asp:panel></contenttemplate>
</asp:updatepanel>

请注意，这两个面板（叠加层和弹出窗口）都有 Class 属性已设置。 这是 CSS，用于给 OverlayPanel 叠加层效果，并给 PopUpPanel 定位和大小，以及边框以及你想要为它指定的任何内容。 随意尝试并更改外观，以你喜欢的方式呈现。

.Overlay { 
  position:fixed; 
  top:0px; 
  bottom:0px; 
  left:0px; 
  right:0px; 
  overflow:hidden; 
  padding:0; 
  margin:0; 
  background-color:#000;  
  filter:alpha(opacity=50); 
  opacity:0.5; 
  z-index:1000;
}
 
.PopUpPanel {  
  position:absolute;
  background-color: #737373;   
  top:100px;
  left:15%;
  z-index:2001; 
  padding:10px;
  min-width:400px;
  max-width:600px;
    
  -moz-box-shadow:3.5px 4px 5px #000000;
  -webkit-box-shadow:3.5px 4px 5px #000000;
  box-shadow:3.5px 4px 5px #000000;

  border-radius:5px;
  -moz-border-radiux:5px;
  -webkit-border-radiux:5px;

 border: 1px solid #CCCCCC;
}

注意叠加层的位置。 它设置为“固定”。 为什么？ 如果你有一个需要滚动的很大页面，使用“固定”，即使滚动，你也会覆盖整个页面。

那么，我们如何显示弹出窗口呢？ 你是否注意到这些面板的 Visible 属性设置为 false？ 只需要更改该属性来显示或隐藏它们，像这样

Private Sub showPopUp(b As Boolean)
  panelOverlay.Visible = b
  panelPopUpPanel.Visible = b
End Sub

这只是一个接收布尔参数（true 或 false）的函数，并将面板的 Visible 属性设置为接收到的参数的值。

就是这样。 简单吧？ 这是它的外观

最后评论

如前所述，这可以用于许多不同的场景：更新进度、快速搜索、主细节页面等。 请随意尝试和更改它。 如果你改进了它，请分享。 如果你想下载示例代码，它可以在本文的顶部找到。 你也可以在我的 博客 中阅读原始 文章。 希望它有所帮助！

感谢阅读！

© . All rights reserved.