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">

<asp:TemplateField ItemStyle-Wrap="false">

<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.

<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.