Páginas

quarta-feira, 14 de dezembro de 2011

Retirar "X" do jQuery Dialog

Em um projeto que trabalhávamos, nos foi solicitado pelo usuário que o "X" do Dialog do jQuery fosse retirado.
Não havia um porque da retirada do "X", dado que neste dialog só continha apenas um botão (ok), mas, para evitar conflitos junto ao usuário, resolvemos pesquisar sobre.

Ao verificar a documentação do jQuery UI Dialog não encontramos nenhuma informação sobre como ocultar o "X". Refletindo um pouco mais, chegamos a conclusão de que quando invocamos o método "alert" no JavaScript, a janela exibida também contêm o "X", conforme imagem abaixo, e não há como retirar, ou seja, o dialog tem o mesmo comportamento.

Diante desta análise identificamos dois modos de retirar este item.

Primeiro Modo - Utilizando jQuery

//Incluir o código após a criação do Dialog na página
$('.ui-dialog-titlebar-close').hide();
O único ponto que vale ressaltar neste modo é que o item só ficará invisível somente na página em que você adicionar o código JavaScript.

Segundo Modo - Utilizando CSS
Edite o arquivo CSS do jQuery UI e procure pela class "ui-dialog-titlebar-close". Nesta class, adicione a propriedade "display" com o valor "none". Ficará:
.ui-dialog-titlebar-close
{
 position: absolute;
 right: .3em;
 top: 50%;
 width: 19px;
 margin: -10px 0 0 0;
 padding: 1px;
 height: 18px;

 /*Esconder o X*/
 display: none;
}


Ao alterar este class, qualquer dialog que contiver no seu projeto não terá o "X".

Antes de aplicar algum dos modos:
Depois de aplicar:

0 comentários:

Postar um comentário