ModalBox ou PopupBox em Asp.net

Exemplo de uma janela popup ou modalbox

janela popup em asp.net

Porque é importante o uso de uma modalBox num website?

São várias as situações em que necessitamos de uma modalBox num website. Talvez a mais generalizada seja a caixa de login ou de registo de utilizador. Mas uma modalBox  oferece-nos a possibilidade de mostrar uma qualquer informação sem termos que mudar de página. Esta possibilidade é muito interessante, sobretudo nas lojas online, porque o visitante não gasta tempo esperando a abertura de páginas.

Quais as opções para uma modalBox?

Há várias opções para conseguir uma modalbox em asp.net mas julgamos que a mais interessante passe pela utilização de Ajax Control Toolkit . Há outra opção que passa pelo uso de Bootstrap, no entanto não conseguimos tanta flexibilidade como com o Ajax Control Toolkit.

Para perceber como instalar/utilizar estes controlos visite o link http://www.ajaxcontroltoolkit.com/ModalPopup/ModalPopup.aspx
A forma de funcionamento deste controlo é muito interessante. Colocamos tudo o que queremos mostrar num panel e executamos o panel quando nos aprouver.

O css para a modalbox

A modalbox para ser visível deve ter um CSS, que deve ser incluído no header da página.  Eis o CSS:

.modalBackground
{
    background-color:Gray;
    filter:alpha(opacity=50);
    opacity:0.7;
}
.pnlBackGround
{
 position:fixed;
    top:10%;
    left:10px;
    width:300px;
    height:125px;
    text-align:center;
    background-color:White;
    border:solid 3px black;
}

O componente ScriptManager

Sempre que executamos AJAX numa página asp.net devemos incluir o componente ScriptManager. Basta arrastá-lo para o nosso código e o resultado será:

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

O componente ModalExtender

Este é o componente que nos permite executar o modal. Este componente tem algumas particularidades, mas acrescentemos primeiro o código:

 <asp:Label ID="lblStupid" runat="server" Text=""></asp:Label>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" PopupControlID="Panel1" TargetControlID="lblStupid" CancelControlID="Button8" BackgroundCssClass="modalBackground" DropShadow="True" runat="server"></ajaxToolkit:ModalPopupExtender>

A label lblStupid nada faz, mas o componente necessita de um elemento para ser executado. Repare que executa o Panel1 e o Botão 8 cancela-o. É importante que dentro do Panel tenha um botão de nome 8 Button8, senão não é executado.

O componente Panel

O componente Panel é a parte mais importante do nosso código. É ele que faz o popup e mostra o seu conteúdo. Eis o código:

<asp:Panel ID="Panel1" runat="server" CssClass="pnlBackGround" Height="300px" Width="500px" Style="display: none;">

<asp:Button ID="Button8" CssClass="btn-warning" runat="server" Text="Fechar"  />
</asp:Panel>

Repare na obrigatoriedade do Button8.

Eis um vídeo que mostra todo o processo.