2012-04-14 40 views
0

我试图打开与JavaScript的一个ModalPopup,我已经在这里搜查计算器和一般的建议似乎是用这样的一个UpdatePanel一个ModalPopupExtender:公开赛上使用javascript

$('#inputAdd').live("click", function() { 
    $('#addRow').show(); 
    $find('<%=mpeIndications.BehaviorID %>').show(); 
}); 

在哪里#inputAdd是我在ModalPopup中的一个html输入图像,它的目标是显示一个显示TextBox的行(#addRow)。然而,当我点击#inputAdd按钮,它显示行,但然后ModalPopup隐藏,我想这可能是因为有一个UpdatePanel,其中包括ModalPopup,我是对的?那么这可能是一个解决方案?我已经将一些代码放入.ascx中。谢谢。

<table class="content-box"> 
    <tr> 
     <td valign="top"> 
      <asp:UpdatePanel runat="server" ID="upAppointments"> 
        <ContentTemplate> 
         <table> 
          <tr> 
           <td> 
            <asp:Button runat="server" ID="btnIndicationsHidden" Style="display: none;" /> 
            <asp:Panel runat="server" ID="pnlIndications" CssClass="modalPanel" Style="display: none;"> 
            <table class="content-box"> 
             <tr> 
              <td> 
               <table style="width: 100%;"> 
                <tr> 
                 <td> 
                  <asp:Panel runat="server" ID="pnlShowCurrentIndication" Style="padding: 13px 8px 8px 8px"> 
                   <table style="width: 100%; border: 0;"> 
                   <tr> 
                    <td style="width: 30%; vertical-align: top;" rowspan="2"> 
                     <asp:RadioButtonList runat="server" ID="gvProfiles" OnDataBound="gvProfiles_DataBound" 
                      DataTextField="Name" DataValueField="Id" Style="white-space: nowrap;" /> 
                    </td> 
                    <td style="padding-left: 10px;" class="contentBox"> 
                     <table style="width: 100%;"> 
                      <tbody id="showTable"> 
                       <tr> 
                        <td id="indicacionestd" runat="server"> 
                         Indicaciones: 
                        </td> 
                       </tr> 
                       <tr> 
                        <td> 
                         <asp:BulletedList ID="blIndicaciones" DataTextField="Valor" runat="server"> 
                         </asp:BulletedList> 
                        </td> 
                       </tr> 
                       <tr> 
                        <td id="contraindicacionestd" runat="server"> 
                         Contraindicaciones: 
                        </td> 
                       </tr> 
                       <tr> 
                        <td> 
                         <asp:BulletedList ID="blContraindicaciones" DataTextField="Valor" runat="server"> 
                         </asp:BulletedList> 
                        </td> 
                       </tr> 
                      </tbody> 
                      <tbody style="display: none;" id="addRow"> 
                       <tr> 
                        <td style="text-align: left; white-space: nowrap;" class="colSepGran"> 
                         Nombre: 
                        </td> 
                       </tr> 
                       <tr class="filSepGranRA"> 
                        <td class="colSepGran"> 
                         <asp:TextBox runat="server" ID="txbName" CssClass="txtNoWidth" Width="150px" ToolTip="Especifique el nombre del perfil"></asp:TextBox> 
                         <act:FilteredTextBoxExtender runat="server" ID="ftbeName" FilterMode="ValidChars" 
                          FilterType="UppercaseLetters, LowercaseLetters, Custom" TargetControlID="txbName" 
                          ValidChars="ñ Ñ ' á é í ó ú Á É Í Ó Ú ü Ü ." /> 
                        </td> 
                       </tr> 
                      </tbody> 
                     </table> 
                    </td> 
                   </tr> 
                   <tr> 
                    <td style="text-align: center; vertical-align: middle;"> 
                     <table style="width: 100%;"> 
                      <tr> 
                       <td> 
                        &nbsp; 
                       </td> 
                       <td> 
                        <input type="image" src="../../App_Themes/Theme/Images/AppIcons/add.png/" id="inputAdd" 
                         title="Adicionar perfil"> 
                       </td> 
                       <td> 
                        <input type="image" src="../../App_Themes/Theme/Images/AppIcons/add_document.png" 
                         id="inputAddSimple" title="Adicionar indicación" /> 
                       </td> 
                       <td> 
                        <input type="image" src="../../App_Themes/Theme/Images/AppIcons/edit.png" id="inputEdit" 
                         title="Editar perfil" /> 
                       </td> 
                       <td> 
                        <asp:ImageButton runat="server" ID="imbRemoveProfile" ToolTip="Eliminar perfil" ImageUrl="~/App_Themes/Theme/Images/AppIcons/delete.png" /> 
                       </td> 
                       <td> 
                        &nbsp; 
                       </td> 
                      </tr> 
                     </table> 
                    </td> 
                   </tr> 
                   <tr> 
                    <td colspan="2"> 
                    </td> 
                   </tr> 
                  </table> 
                 </asp:Panel> 
                </td> 
               </tr> 
              </table> 
             </td> 
            </tr> 
           </table> 
          </asp:Panel> 
          <act:ModalPopupExtender ID="mpeIndications" runat="server" PopupControlID="pnlIndications" 
           BackgroundCssClass="modalBackground" TargetControlID="btnIndicationsHidden" CancelControlID="imbCloseIndications" 
           BehaviorID="mpeIndications"> 
          </act:ModalPopupExtender> 
         </td> 
        </tr> 
         </table> 
        </ContentTemplate> 
      </asp:UpdatePanel> 
     </td> 
    </tr> 
</table> 

回答

0

那就试试这种方法:

添加一个隐藏的链接,ModalPopup扩展附加到(这永远不会用到)

<a href="#" style="display:none;visibility:hidden;" 
    onclick="return false" ID="dummyLink" runat="server">dummy</a> 

隐藏链接的ID添加到ModalPopupExtender

<act:ModalPopupExtender ID="mpeIndications" runat="server" PopupControlID="pnlIndications" 
    BackgroundCssClass="modalBackground" 
    TargetControlID="dummyLink" 
    CancelControlID="imbCloseIndications" 
    BehaviorID="mpeIndications"> 

显示的模式弹出

$find('MyMPE').show(); 

http://www.geekzilla.co.uk/View38736C2B-BAD3-418A-A5B0-DAC4F1A5A83A.htm

0
+0

并不完全是ModalPopupExtender他们正在使用的,但我一直在使用jQueryUI进行模态评估,因为一段时间,也许应该是时候试一试了。 – 2012-04-15 04:31:53

+0

让我看看我有人能够更清楚地了解这里发生了什么,但是有一个备份计划很好,谢谢。 – 2012-04-15 04:43:40