我在显示两个模式弹出窗口时遇到问题。场景是这样的:
我在按钮单击时显示一个模式弹出窗口。我在此模式弹出窗口中有另一个按钮。当我单击此按钮时,我会显示另一个模式弹出窗口。现在的问题是,当我显示第二个弹出窗口时,第一个弹出窗口仍然可以点击。我应该怎么做才能使用户无法单击第一个弹出窗口。
任何帮助将不胜感激
谢谢!
我在显示两个模式弹出窗口时遇到问题。场景是这样的:
我在按钮单击时显示一个模式弹出窗口。我在此模式弹出窗口中有另一个按钮。当我单击此按钮时,我会显示另一个模式弹出窗口。现在的问题是,当我显示第二个弹出窗口时,第一个弹出窗口仍然可以点击。我应该怎么做才能使用户无法单击第一个弹出窗口。
任何帮助将不胜感激
谢谢!
我之前遇到过这个问题……关于您将扩展器放置在与其面板相关的位置方面存在一些问题。我不记得具体哪个版本最终起作用了,但是您可以尝试以下组合。
例如
<!-- 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>
比。
<!-- 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" />
比。
<!-- 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>
您可以设置一个使页面变灰的背景 CssClass,也可以在后面的代码中捕获单击,并通过调用 externer.hide() 方法告诉它隐藏上一个弹出窗口,这将为您提供所需的内容。
我遇到了类似的问题。与其有 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 是跨浏览器安全的。
祝你好运
假设这与html有关:
将第二个弹出窗口的 zindex 设置为高于第一个
第一个弹出窗口:
position:relative;
z-index:1;
第二弹窗:
position:relative;
z-index:2;