【问题标题】:ajaxcontorltoolkit modal popup showing behind div position fixedajaxcontorltoolkit 模态弹出窗口显示在 div 位置固定
【发布时间】:2013-09-24 12:34:55
【问题描述】:

我在页面顶部有一个标题 div,母版页中有 Position: fixed

在内容页面中,我有一个模态弹出窗口,我想占用大部分屏幕,但弹出窗口显示从标题 div 结束的点(即从顶部)

我有这个用于弹出和弹出背景类的 css...

.modalBackground {
    background-color: #AAAAAA;
    -moz-opacity: 0.7;
    opacity: 0.7;
    filter: alpha(opacity=70);
}

.modalPopup {
    position: relative;
    min-height: 200px;
    width: 100%;
    border: solid 1px #e5e5e5;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background-color: #f5f6f5;
}

并且为模态背景生成此css(在显示模态弹出窗口之后):

{
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 10000;
    width: 1003px;
    height: 598px;
}

更新 1 这是 ModalPopup 标记:

    <ajaxToolkit:ModalPopupExtender ID="mpeImageViewer" runat="server" Drag="false" PopupControlID="pnlImageViewer" Y="90"
        TargetControlID="imgEmpty" BackgroundCssClass="modalBackground" CancelControlID="imgClose" DropShadow="true">
    </ajaxToolkit:ModalPopupExtender>

和面板标记:

<asp:Panel ID="pnlImageViewer" runat="server" Style="display: none;" Width="975px" Height="550px" CssClass="modalPopup"></asp:Panel>

更新 2 Header中有一个菜单,也需要显示。我非常感谢__的人们所做的一切努力。

我将在几分钟后分享弹出窗口的屏幕截图

更新 3

从 Chrome 查看源代码后附加源代码... Source Code

更新 4

附加相应的 CSS 文件...

Menu.css

Default.css

【问题讨论】:

  • 嗯,我已经读出了你的整个问题,我不明白你想要整个页面背景和弹出窗口吗?
  • 可以添加生成的相关客户端HTML吗?
  • 我已经发布了一个潜在的解决方案;但是,如果这对您不起作用,那么能够看到客户端 HTML 将有很大帮助。
  • 太棒了。有没有办法发布 CSS 代码?如果可能的话,我想看看他们所有的堆叠上下文是什么。
  • 有很多 CSS,而 CSS 本身就是一团糟,但让我把你想看的东西发给你 :) 你必须自己弄清楚,那里到底发生了什么 :)

标签: asp.net css ajaxcontroltoolkit modalpopupextender


【解决方案1】:

当您具有以下 HTML 结构时:

<div class="header">
   here is your header content
</div>
<div class="content">
   here is your model somewhere
</div>

并且您的 .header 有一个 z-index:2; 并且您的 .content 有一个 z-index:1; 该部门内的内容(在这种情况下可能是您的模型)将始终出现在您的标题下方。 在这种情况下,我想不出其他任何东西。

【讨论】:

  • 你似乎是唯一一个理解我的问题的人,但没有解决方案...... :(
  • 我确信它应该是这样的。您可以将代码粘贴到您的问题中吗?这可能会有所帮助。
  • 我已经更新了我的问题,稍后会提供截图和更多代码...
【解决方案2】:

对于以后的问题,我强烈建议您同时发布生成的 HTML 客户端代码,因为这是 CSS 的作用。它将帮助人们更快地了解问题并更快地找到解决方案。

没有看到您的完整源代码或客户端 HTML,这都是猜测;但是,我相信您的问题与the stack(ing) order 有关。

基本上,我认为您的设置(特别是根据您对 Rens Tillmann 的回答的回答来判断)如下:

HTML:

<div id="header">
    ...Fixed content showing above modal popup...
</div>
<div id="content">
    ...Modal background element + Modal popup content...
</div>

在这种情况下,如果#headerz-index 大于#contentz-index(假设#content 具有适当的堆叠上下文),则固定标头将始终显示在模式上方内容,因为模态内容位于#content 的堆叠上下文的子上下文中。这意味着无论你给什么z-index模态内容,它总是低于#header

Here is a JSFiddle to illustrate the issue.


那么,我们能做些什么呢?目前我能想到的四种解决方案可以得到#header以上的模态内容。

如果您的网站设计允许,解决方案 4 是最简单的潜在解决方案。


解决方案一:

使#content 的堆叠顺序高于#header。这不是答案,因为我假设我们需要 #header 浮在 #content 上方。

这样做会使正常内容显示在标题内容上方。

JSFiddle to illustrate why this won't work.


解决方案 2:

#header 放入与模态相同的堆叠上下文中。这可以工作;但是,根据您的网页在 HTML 和 CSS 中的布局方式,这可能是不可能的。

要将#header 放入与模态框相同的堆叠上下文中,最简单的方法是将其移动为模态框的sibling 元素。

JSFiddle to illustrate this solution.

此解决方案的另一个潜在缺点是,将标题放在内容中可能会在语义上造成混淆。


解决方案 3:

将模态背景+内容放入#header元素的同一个堆叠上下文中。根据您的 ASP.Net 代码的设置方式,这可能是不可能的。我不完全掌握 AjaxControlToolkit 的工作原理。所以我不知道这是否可能。

最简单的方法是将ModalPopupPanel 标记移动到#header 元素的siblings

HTML:

<ajaxToolkit:ModalPopupExtender ID="mpeImageViewer" runat="server" Drag="false" PopupControlID="pnlImageViewer" Y="90"
    TargetControlID="imgEmpty" BackgroundCssClass="modalBackground" CancelControlID="imgClose" DropShadow="true">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pnlImageViewer" runat="server" Style="display: none;" Width="975px" Height="550px" CssClass="modalPopup"></asp:Panel>
<div id="header">
    ...fixed header content...
</div>
<div id="content">
    ...regular content...
</div>

如果您这样做,它们的z-index 值将位于相同的上下文中并且可以相互影响。

Here is a JSFiddle to illustrate this in action.


注 1:

解决方案3中,您还可以将模态置于比#header 的堆栈上下文更高的堆栈上下文中,它仍然可以工作。

例如,这也可以(假设模态的z-index 高于#wrapper 元素):

<ajaxToolkit:ModalPopupExtender ID="mpeImageViewer" runat="server" Drag="false" PopupControlID="pnlImageViewer" Y="90"
    TargetControlID="imgEmpty" BackgroundCssClass="modalBackground" CancelControlID="imgClose" DropShadow="true">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pnlImageViewer" runat="server" Style="display: none;" Width="975px" Height="550px" CssClass="modalPopup"></asp:Panel>
<div id="wrapper">
    <div id="header">
        ...fixed header content...
    </div>
    <div id="content">
        ...regular content...
    </div>
</div>

注2:

要处于相同的堆叠上下文中,您不必是兄弟元素。你应该有兄弟堆叠上下文

例如:

<div class="has-stacking-context" style="z-index: 2;">
    (stacking context sibling 1)
    ...content will show in middle...
</div>
<div class="no-stacking-context">
    <div class="no-stacking-context">
        <div class="has-stacking-context" style="z-index: 3;">
            (stacking context sibling 2)
            ...content will show above everything...
        </div>
    </div>
</div>
<div class="has-stacking-context" style="z-index: 1;">
    (stacking context sibling 3)
    <div class="no-stacking-context">
        <div class="has-stacking-context" style="z-index: 100000;">
            (subcontext of sibling 3's stacking context)
            ...content will show below everything...
        </div>
    </div>
</div>

物理移动元素(正如我在解决方案 2 和 3 中所做的那样)只是回避了删除各种堆叠上下文以使两个堆叠上下文成为兄弟的任何需要。有时无法移除某些元素的堆叠上下文。


解决方案4(可以这么简单吗?):

这基本上是解决方案 3 的另一种方法。我们不是物理移动模态元素以匹配堆叠上下文,而是消除阻止 #header 和模态元素堆叠上下文成为同级的堆叠上下文。

取决于您的 CSS 的设置方式,这可能有效,也可能无效。

例如,可以只删除 #content 元素的堆叠上下文,以便它们成为堆叠上下文兄弟。

Here is a JSFiddle to illustrate the easiest potential solution.

请注意,我删除了 #content 元素的 z-index 属性(和 position 属性)。它现在没有堆叠上下文。您可以对模态元素的所有祖先元素执行此操作,以查看它是否有效。请记住,其中一些祖先可能实际上需要它们的堆叠上下文...


最终解决方案(与您交谈后):

所以,在查看了您的代码之后。我基本上使用解决方案 4 解决了这个问题。您的结构如下所示:

<div class="HeaderContainer">
</div>
<div id="contentAreaMasterPage">
    <div id="ctl00_MainContentPlaceHolder_ImageThumbnailList_ImageViewer_mpeImageViewer_foregroundElement" style="position: fixed; z-index: 100001; left: 38.5px; top: 10px;">...</div>
    <div id="ctl00_MainContentPlaceHolder_ImageThumbnailList_ImageViewer_mpeImageViewer_backgroundElement" class="modalBackground" style="position: fixed; left: 0px; top: 0px; z-index: 10000; width: 1003px; height: 601px;"></div>
</div>

因为.HeaderContainer 具有10z-index#contentAreaMasterPage 具有9z-index,所以#contentAreaMasterPage 中的所有内容将始终显示在.HeaderContainer1 下方。因此,即使这两个模态元素的 z-index 值是 .HeaderContainerz-index10 的 100 倍以上,它们仍将始终显示在其下方,因为它们位于 #contentAreaMasterPage 的 @987654375 内部@9

因此,我们想要摆脱#contentAreaMasterPagez-index,这样它就不再有一个堆栈上下文来介于.HeaderContainer 和模态元素的z-index 值之间。在这种情况下删除z-index 是安全的,因为.HeaderContainer 无论如何都会显示在#contentAreaMasterPage 上方,而#contentAreaMasterPage 不需要较低的z-index

相关的解决方案 CSS 代码如下:

#contentAreaMasterPage {
    z-index: auto !important;
}

由于您无法修改主模板或主 CSS 文件,因此该文件位于您的特定页面中。

【讨论】:

  • 感谢您的详细回答。我认为解决方案 3 可以解决这个问题,但考虑到我的项目中有大约 250 个内容页面并且只有一个母版页,并且如果我将弹出窗口放在母版页中,这是一个非常昂贵的问题。为所有剩余页面隐藏它是不可行的......不过我会详细研究它......
  • 不客气。在这种情况下,我会看看解决方案 4 是否适合您,因为它只会触及 CSS 代码(而不是 ASP.Net 或 HTML 代码)。我期待您更新更多代码。一旦我看到它,我会看看我是否可以提供进一步的帮助。
  • 作为最后的尝试,我还尝试更改此特定页面的整个页眉,但结果显然是页眉没有固定,页眉的菜单和链接现在完全无法访问。我应该分享我的主页来源吗?
  • 如果您可以分享您的页面源代码和与页面相关的 CSS,那将有很大帮助!
  • 这是我之前的评论,删除后在这里重新输入对不起,关于我之前的评论,我已经尝试过了。它不起作用。 :( 这就是我所做的。#contentAreaMasterPage { position: relative !important; top: auto !important; }。我这样做是因为我无法更改整个站点的 CSS。我必须更改该特定页面的 CSS只有
【解决方案3】:

尝试使用position: relative; 而不是position: fixed;

.modalPopup {
    position: absolute;
    min-height: 200px;
    width: 100%;
    border: solid 1px #e5e5e5;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background-color: #f5f6f5;
}


{
    position: relative;
    left: 0px;
    top: 0px;
    z-index: 10000;
    width: 1003px;
    height: 598px;
}

例如

<tr>
                        <td colspan="2">
                            <asp:Button ID="btnSurveyId" runat="server" Style="display: none;" />
                            <cc1:ModalPopupExtender ID="mpeSurveyId" runat="server" TargetControlID="btnSurveyId"
                                CancelControlID="imgCloseSurveyId" BackgroundCssClass="modalBackground" PopupControlID="pnlSurveyId"
                                PopupDragHandleControlID="pnlIdSurveyName" Drag="true" DropShadow="true">
                            </cc1:ModalPopupExtender>
                            <asp:Panel ID="pnlSurveyId" runat="server" CssClass="modalBox" Width="250px" Height="100px"
                                Style="display: none;">
                                <asp:Panel ID="pnlIdSurveyName" runat="server" CssClass="caption" Style="margin-bottom: 10px;
                                    cursor: move;">
                                    <table border="0" cellpadding="0" cellspacing="0" style="width: 100%">
                                        <tr style="border: solid 1px balck; background-color: Gray;">
                                            <td>
                                                <strong style="color: White; vertical-align: middle;"><span id="Span2" runat="server">
                                                    Change Survey Id</span></strong>
                                            </td>
                                            <td align="right" valign="top" style="cursor: pointer;">
                                                <img id="imgCloseSurveyId" alt="Close" src="../Images/close.gif" />
                                            </td>
                                        </tr>
                                    </table>
                                </asp:Panel>
                                <div style="width: 100%">
                                    <table>
                                        <tr>
                                            <td>
                                                <asp:DropDownList ID="ddlSurveyName" runat="server" Width="190px" Style="margin-left: 30px;">
                                                </asp:DropDownList>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="padding: 5px;">
                                                <asp:Button ID="btnSubmitSurvey" runat="server" Text="Submit" Width="100px" ValidationGroup="SurveyId"
                                                    Style="margin-left: 20px;" OnClick="btnSubmitSurvey_Click" />
                                                <asp:Button ID="btnCancelSurvey" runat="server" CausesValidation="False" Text="Cancel"
                                                    Width="90px" OnClick="btnCancelSurvey_Click" Style="margin-left: 5px;" />
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </asp:Panel>
                        </td>
                    </tr>

【讨论】:

  • 这不是我的代码,这是从AjaxControlToolkit 自动生成的css,所以我想我不能修改它...
  • 你可以改变它..让它成为你自己的。
  • 在我使用自定义 css BackgroundCssClass="modalBackground", CssClass="modalBox"的地方检查我的更新答案
  • 我已经更新了这个问题。我已经这样做了,并在这里分享了@98​​7654327@ 类,第三类是我使用 Chrome 的“检查元素”看到的一类
【解决方案4】:

在您的标记中:

<ajaxToolkit:ModalPopupExtender ... PopupControlID="pnlImageViewer" Y="90" ...

您已指定Y="90",这将导致弹出窗口显示距顶部 90 像素。请删除后尝试。

【讨论】:

  • 该问题与弹出窗口显示在错误的位置无关。这是因为背景没有显示在整个页面上。请参阅我上面的问题。问题在于背景...
【解决方案5】:

将zindex应用于大于背景div的模型弹出div

例如

.modalPopup {
    position: absolute;
    min-height: 200px;
    width: 100%;
    border: solid 1px #e5e5e5;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background-color: #f5f6f5;
    z-index: 90000;
} 

【讨论】:

  • 如您所见。 z-index 已经更高了... z-index 忽略了position:fixed divs
  • 你想说的让我很困惑,亲爱的。您应该将具有绝对位置的背景 div 和主弹出窗口作为固定位置。这样它应该可以正常工作
  • stackoverflow.com/a/18982084/217757上方查看我与nrsharma的回答的对话
【解决方案6】:

尝试以下(为我工作):

这是模态弹窗的背景样式

.modalBackground 
{
    background-color:#414141;
    filter:alpha(opacity=70);
    opacity:0.7;
    position:absolute;

}

以下是您要显示的面板的样式

.Panel_Popup_Style
{
    background-color:White;
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-03-26
    相关资源
    最近更新 更多