Abrindo Janela de Forma Modal
Olá pessoal,
gostaria de ensinar e mostrar de forma prática; como uma janela de forma modal
web, ou seja, na internet. Esse dia atrás estava precisando disso e não tinha
achado da forma que necessitava.
É bem simples de fazer, mas até descobrir
como fazer eu penei um pouco e, para ajudar publico como artigo agora para quem
quiser. O problema de abrir de forma modal é que caso necessite de alguma outra
coisa da janela anterior, tem que fechar a modal.
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 (Referência: Code 1)
|
/* ### função que
abre um popup de forma modal ### deve ser
passado a url, nome, tamanho e largura por exemplo
OnClick="dialogModal('pagina.html', 'nome', '620', '1024'); */ function
dialogModal(url, nome, nrTamanho, nrLargura) { eval(window.showModalDialog(url, nome,'Resizable:no; DialogHeight:'+nrTamanho+'px ; DialogWidth:'+nrLargura+'px; Edge:raised; Help:no; Scroll:no; Status:no;
Center:yes;')); //eval(caixa); } |
Referência: Code 1
GridView
Dentro do meu gridview, tenho as
colunas normais da tabela do banco e um botão imagem. (Referência: Code 2)
|
<asp:GridView ID="gridView" runat="server" AutoGenerateColumns="false" Width="100%" onrowdatabound="gridView_RowDataBound" HorizontalAlign="Center"> <Columns> <asp:TemplateField ItemStyle-Wrap="false"> <ItemTemplate> <asp:ImageButton ID="cmdImagemGrid"
runat="server"
ImageUrl="~/App_Themes/default/image/Doc.gif"></asp:ImageButton> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="Descricao" HeaderText="Crp" /> <asp:BoundField DataField="Sequencial" HeaderText="Passada" /> <asp:BoundField DataField="DataMovimento" HeaderText="Data Movimento" /> <asp:BoundField DataField="DataInicial" HeaderText="Inicio Transf." /> <asp:BoundField DataField="DataFinal" HeaderText="Fim Transf." /> <asp:BoundField DataField="TempoTransferencia" HeaderText="Tempo
Trans." /> <asp:BoundField DataField="QtdDocumentos" HeaderText="Qtd. Docs" /> <asp:BoundField DataField="QtdFalhas" HeaderText="Falhas" /> <asp:BoundField DataField="Responsavel" HeaderText="Digitalizado por" /> <asp:BoundField DataField="PassadaId" HeaderText="Passada" /> </Columns>
</asp:GridView> |
Referência: Code
2
O botão dentro do gridview está separado, dentro da tag <ItemTemplate>. Referência Code 3.
|
<ItemTemplate> <asp:ImageButton ID="cmdImagemGrid" runat="server" ImageUrl="~/App_Themes/default/image/Doc.gif"></asp:ImageButton> </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#. Referência Code 4.
|
protected
void gridView_RowDataBound(object sender, GridViewRowEventArgs
e) { if
(e.Row.RowType == DataControlRowType.DataRow) { //adiciona
no botao de imagem o comando javascript dialogModal no onclickClient ImageButton
img = (ImageButton)(e.Row.FindControl("cmdImagemGrid")); img.OnClientClick = "dialogModal ('ControleQualidadeImagem.aspx"','pesquisa1',
'620', '1000')"; } } |
Referência: Code
4
É bem simples, verifiquei primeiro se o
tipo da linha era DataRow, depois usei o FindControl para achar o componente
chamado cmdImagemGrid e depois
adicionei a esse componente, o atributo OnClienteClick
passando o nome da função criada em JavaScript anteriormente.
Resultado Final
O resultado final é uma janela é a
mostrada a seguir. (Referência Imagem 1)
Referência:
Imagem 1
Espero ter
ajudado.
Qualquer dúvida
pode entrar em contato pelo comentário do site.
Sign up to our newsletter
Receive our latest updates about programming languages, software, database, books, ebooks, classes, jobs and more.
