Question

我在显示两个模态弹出窗口时遇到问题。场景如下：

我在按钮上单击显示一个模态弹出窗口。我在此模态弹出窗口中有另一个按钮。当我点击这个按钮时，我会显示另一个模态弹出窗口。现在的问题是，当我显示第二个弹出窗口，第一个弹出窗口仍然是clikable。我该怎么做才能让用户无法点击第一个弹出窗口。

任何帮助都将受到高度赞赏

谢谢！

Answer 1

假设这与html有关：

将第二个弹出窗口的zindex设置为高于第一个

第一个弹出窗口：

position:relative;
z-index:1;

第二次弹出：

position:relative;
z-index:2;

Answer 2

我之前遇到过这种情况......关于你的扩展器与其面板的关系，你有一些怪癖。我不记得具体到哪个版本工作，但你可以使用以下组合。

e.g。

<!-- 2 Seperate Panels & Extenders -->
<ajt:ModalPopupExtender ID="mpe1" TargetControlID="pnl1" />
<asp:Panel ID="pnl1">
   <asp:Button ID="btn1" /> <!-- launches pnl2 popup -->
</asp:Panel>

<ajt:ModalPopupExtender ID="mpe2" TargetControlID="pnl2" />
<asp:Panel ID="pnl2">
   Content
</asp:Panel>

Vs以上。

<!-- 2 Nested Panels & But separate Extenders -->
<ajt:ModalPopupExtender ID="mpe1" TargetControlID="pnl1" />
<asp:Panel ID="pnl1">
   <asp:Button ID="btn1" /> <!-- launches pnl2 popup -->
   <asp:Panel ID="pnl2">
       Content
   </asp:Panel>
</asp:Panel> 
<ajt:ModalPopupExtender ID="mpe2" TargetControlID="pnl2" />

Vs以上。

<!-- 2 Fully Nested Panels & Extenders -->
<ajt:ModalPopupExtender ID="mpe1" TargetControlID="pnl1" />
<asp:Panel ID="pnl1">
   <asp:Button ID="btn1" /> <!-- launches pnl2 popup -->
   <ajt:ModalPopupExtender ID="mpe2" TargetControlID="pnl2" />
   <asp:Panel ID="pnl2">
       Content
   </asp:Panel>
</asp:Panel>

Answer 3

你可以设置一个灰色页面的后台CssClass，也可以捕获后面代码中的点击，并通过调用externer.hide（）方法告诉它隐藏上一个弹出窗口，这样就可以了解你的情况寻找。

Answer 4

我遇到过类似的问题。而不是有2个模态弹出窗口，放置一个面板，其中有两个面板。父面板获取模态弹出扩展器，而两个内部基于单击的按钮隐藏/显示。根据应用于模态的样式，在CSS中应用z-index会起作用，但是，我遇到了另一个模态。

有两个孩子的面板的快速代码示例是：

<asp:Panel id="pnlParent" runat="server">
<asp:panel id="pnlChild1" runat="server" visible="false">
... controls ...
</asp:Panel>
<asp:Panel id="pnlChild2" runat="server" visible="false">
</asp:panel>
<asp:ModalPopupExtender id="mpePnlParent" runat="server" ...other attributes .../>

现在，在第一个按钮单击时，将pnlchild1的可见性设置为true。 pnlChild1按钮的onclick事件将pnlChild1的可见性设置为false，pnlChild2的可见性为true。

最后，在完成第二个子面板的任何操作中，隐藏两个子面板并使用面板的.Hide（）方法隐藏modalpopup。

这里有一些CSS尝试使用模态弹出窗口使主屏幕背景变灰，并“突出显示”模态内容

.modalBackground
{
    background-color: #000011;
    -moz-opacity: .60;
    filter: alpha(opacity=60);
    opacity: .60;
}
.modalPopup
{
    padding: 5px;
    border: 5px outset #00F;
    background-color: #FFF;
    width: 640px;
}

以上CSS是跨浏览器安全的。

祝你好运

问题与ajax模式弹出扩展器

4 个答案: