Ocultar y mostrar un Ajax Modal Popup

Hola hola, ¿por qué llamo al hide o el show y no hacen lo que deben realizar? Bueno eso lo vamos a ver hoy, primero desde el lado del cliente.

En JavaScript debemos obtener el modal con la función find de Jquery y el Id mediante ASP por ejemplo

$find('<%= ModalPopupExtender1.ClientID %>')

Una vez hecho esto podemos aplicarle el método show o hide

$find('<%= ModalPopupExtender1.ClientID %>').hide();
$find('<%= ModalPopupExtender1.ClientID %>').show();

Ahora analicemos desde C#, en nuestro HTML tenemos algo similar a esto. Hay que prestar mucha atención a lo siguiente:

• OkControlID: Indica el botón que tiene la acción de un submit success digamos
• CancelControlID: Indica el botón que tiene la acción de un cancel.

<asp:Panel ID="MiPanel" runat="server">
    <table align="center" runat="server">

        <tr>
            <td>
                <asp:Label runat="server"  Text="Lorem Ipsum"></asp:Label>
            </td>
        </tr>
        <tr>
            <td>
                <asp:Button ID="Okbtn" runat="server" Text="Ok" />
                <asp:Button ID="CancelBtn" runat="server" Text="Cancel />
            </td>
        </tr>
    </table>
</asp:Panel>

<espaciodenombrelibreria:ModalPopupExtender ID="MiModalPopup" runat="server" TargetControlID="" 
PopupControlID="MiPanel" backgroundCssClass="modalBackground" DropShadow="false" OkControlID="Okbtn"  
CancelControlID="CancelBtn" PopupDragHandleControlID="" />

Ahora para mostrar el popup desde C# basta con llamar la función Show y Hide para ocultarlo, por ejemplo:

MiModalPopup.Show();

Nos vemos 🙂