ajaxモーダルポップアップエクステンダで問題が発生する

Question

2つのモーダルポップアップを表示しているときに問題が発生しています。 シナリオは次のようになります。

ボタンクリックでモーダルポップアップを1つ表示します。このモーダルポップアップ内に別のボタンがあります。 このボタンをクリックすると、別のモーダルポップアップが表示されます。今問題は、私が 第2ポップアップを表示すると、最初のポップアップはまだclikableです。 ユーザーが最初のポップアップをクリックできないようにするにはどうすればよいですか。

ご協力いただければ幸いです。

ありがとうございました！

Answer 1

これはHTMLとは何かを持っていると仮定すると：

position:relative; 
z-index:1; 

第二ポップアップ：

は最初

第一ポップアップ、その後も高いことが第二のポップアップののZIndexを設定

position:relative; 
z-index:2; 

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> 

対。

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

Answer 3

あなたがいずれかのページアウトグレーのか、背後にあるコード内でクリックをキャプチャし、externer.hide（）メソッドを呼び出すことにより、以前のポップアップを非表示にすることを伝え、それが与えることができた背景のCssClassを設定することができますあなたは何を探しているのですか？

Answer 4

私は同様の問題に遭遇しました。 2つのモーダルポップアップを用意するのではなく、1つのパネルに2つのパネルを配置します。親パネルはモーダルポップアップエクステンダーを取得し、2つの内部はどのボタンがクリックされたかに基づいて非表示/表示されます。モーダルに適用されたスタイルに依存して、CSSでZ-インデックスを適用することはできますが、私はもう一方のモーダルに輝きました。

2人の子供を持つパネルの簡単なコード例は次のようになります。

<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 .../> 

さて、最初のボタンのクリックで、trueにpnlchild1の可視性を設定します。 pnlChild1のボタンのonclickイベントは、pnlChild1の可視性をfalseに設定し、pnlChild2の可視性をtrueに設定します。

最後に、2番目の子パネルを完了するアクションでは、両方の子パネルを非表示にして、パネルの.Hide（）メソッドでモダルパネルを非表示にします。ここで

は、いくつかのメイン画面の背景をグレーにモーダルポップアップにしようとするCSS、および「ハイライト」は、上記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; 
} 

です。

幸運