проблема с модальным расширением всплывающего окна ajax

Question

Я столкнулся с проблемой при отображении двух модальных всплывающих окон. Сценарий выглядит так:

Я показываю одно модальное всплывающее окно при нажатии кнопки. У меня есть другая кнопка внутри этого модального всплывающего окна. Когда я нажимаю на эту кнопку, я отображаю другое модальное всплывающее окно. Теперь проблема в том, что когда я отобразить второе всплывающее окно, первое всплывающее окно по-прежнему кликабельна. Что я должен сделать, чтобы пользователь не мог щелкнуть первое всплывающее окно.

Любая помощь будет высоко ценится

Спасибо!

Answer 1

Я столкнулся с похожими проблемами. Вместо того, чтобы иметь 2 модальных всплывающих окна, поместите одну панель с двумя панелями внутри. Родительская панель получает модальный расширитель всплывающих окон, в то время как две из них скрыты / показаны в зависимости от того, какая кнопка нажата. В зависимости от стилей, примененных к модалам, применение z-индекса в CSS будет работать, однако я столкнулся с другим модальным сиянием.

Пример быстрого кода панели с двумя дочерними элементами:

<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. Событие onclick кнопки pnlChild1 установит для видимости pnlChild1 значение false, а для видимости pnlChild2 - значение true.

наконец, при любом действии, завершающем 2-ю дочернюю панель, скройте обе дочерние панели и скройте modalpopup с помощью метода панели .Hide ().

Вот пример 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 безопасен для всех браузеров.

Удачи

Answer 2

Я сталкивался с этим раньше ... была некоторая странность относительно того, где вы разместили свои экстендеры по отношению к их панелям. Я не могу вспомнить, какая именно версия работала, но вы можете поиграть со следующими комбинациями.

, например

<!-- 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

при условии, что это как-то связано с html:

установить zindex второго всплывающего окна выше первого

1-е всплывающее окно:

position:relative;
z-index:1;

2-е всплывающее окно:

position:relative;
z-index:2;