Abrindo uma janela de forma modal
Olá pessoal, gostaria de mostrar hoje uma forma prática de como abrir uma janela de forma modal web, ou seja, na
internet. Outro dia eu precisei disso e não tinha achado da forma
que necessitava. Não é das coisas mais complicadas a fazer, mas até descobrir como chegar lá, eu penei um pouco.
Caixas de diálogo (dialog) são um recurso de interface muito útil em programas gráficos basados em janelas, quando se recorrer a uma janela secundária para solicitar ao usuário informações complementares. Existem dois tipos de associação entre uma janela de diálogo e a janela principal
à qual está associada. Uma delas é a modal, quando a abertura da janela de diálogo
bloqueia qualquer interação na janela principal, até que o diálogo seja encerrado.
Requisitos:
- Javascript
- Linguagem C#.NET
- Ferramenta de
desenvolvimento: Visual Studio .NET 2008
JavaScript
No meu caso, criei um arquivo .js e
importei na minha página .ASPX. Eu posso chamar a função criada no arquivo .js
de qualquer plataforma ou linguagem. No meu caso estou chamando dentro de um
componente chamado GridView. Segue o arquivo (Code 1)
/*<br /><br /> ### função que abre um popup de forma modal<br /><br /> ### deve ser passado a url, nome, tamanho e largura<br /><br /> por exemplo OnClick="dialogModal('pagina.html', 'nome', '620', '1024');<br /><br />*/<br /><br />function dialogModal(url, nome, nrTamanho, nrLargura) {<br /><br /> eval(window.showModalDialog(url, nome,'Resizable:no; DialogHeight:'+nrTamanho+'px ; DialogWidth:'+nrLargura+'px; Edge:raised; Help:no; Scroll:no; Status:no; Center:yes;'));<br /><br /> //eval(caixa);<br /><br />}Code
1
GridView
Dentro do meu gridview, tenho as
colunas normais da tabela do banco e um botão imagem (Code 2).
<asp:GridView ID="gridView" runat="server"<br /><br /> AutoGenerateColumns="false"<br /><br /> Width="100%" onrowdatabound="gridView_RowDataBound" HorizontalAlign="Center"><br /><br /> <Columns><br /><br /> <asp:TemplateField ItemStyle-Wrap="false"><br /><br /> <ItemTemplate><br /><br /><br /><br /> <asp:ImageButton ID="cmdImagemGrid"<br /><br /> runat="server" ImageUrl="~/App_Themes/default/image/Doc.gif"></asp:ImageButton><br /><br /><br /><br /> </ItemTemplate><br /><br /> </asp:TemplateField><br /><br /> <asp:BoundField DataField="Descricao" HeaderText="Crp" /><br /><br /> <asp:BoundField DataField="Sequencial" HeaderText="Passada" /><br /><br /> <asp:BoundField DataField="DataMovimento" HeaderText="Data Movimento" /><br /><br /> <asp:BoundField DataField="DataInicial" HeaderText="Inicio Transf." /><br /><br /> <asp:BoundField DataField="DataFinal" HeaderText="Fim Transf." /><br /><br /> <asp:BoundField DataField="TempoTransferencia" HeaderText="Tempo Trans." /><br /><br /> <asp:BoundField DataField="QtdDocumentos" HeaderText="Qtd. Docs" /><br /><br /> <asp:BoundField DataField="QtdFalhas" HeaderText="Falhas" /><br /><br /> <asp:BoundField DataField="Responsavel" HeaderText="Digitalizado por" /><br /><br /> <asp:BoundField DataField="PassadaId" HeaderText="Passada" /><br /><br /> </Columns><br /><br /> </asp:GridView> Code 2
O botão dentro do gridview está
separado, dentro da tag <ItemTemplate> (Code 3).
<ItemTemplate><br /><asp:ImageButton ID="cmdImagemGrid" runat="server" ImageUrl="~/App_Themes/default/image/Doc.gif"></asp:ImageButton><br /></ItemTemplate>Code 3
Código C#
Para pegar esse botão e adicionar uma
propriedade pra ele, tenho que criar o RowDataBound do componente GridView,
isso dentro código C#. Veja o Code 4.
protected void gridView_RowDataBound(object sender, GridViewRowEventArgs e)<br /><br /> {<br /><br /><br /><br /> if (e.Row.RowType == DataControlRowType.DataRow)<br /><br /> {<br /><br /> //adiciona no botao de imagem o comando javascript dialogModal no onclickClient<br /><br /> ImageButton img = (ImageButton)(e.Row.FindControl("cmdImagemGrid"));<br /><br /><br /><br /> img.OnClientClick = "dialogModal ('ControleQualidadeImagem.aspx"','pesquisa1', '620', '1000')";<br /><br /> }<br /><br /> } Code
4
Verifiquei primeiro se o
tipo da linha era DataRow, depois usei o FindControl para achar o componente
chamado cmdImagemGrid e então adicionei o atributo OnClienteClick
a esse componente, passando o nome da função criada em JavaScript anteriormente.
Resultado Final
O resultado final é uma janela como a
mostrada a seguir (Imagem 1)
Imagem 1
Espero ter
ajudado. Qualquer dúvida
pode entrar em contato pelo comentário do site.
Com mais de 20 anos trabalhando no mercado de tecnologia. Mestre em Engenharia Elétrica voltada para o mundo mobile, com mais de 20 livros publicados e cerca de 700 artigos publicados com intuito de ajudar àqueles que querem aprender a programar (site, software, desktop, serviços, api e mobile). Site pessoal: https://www.mauriciojunior.net - MVP, MCAD, MCP Microsoft
