popup | André Menegassi
Arquivo da tag: popup
Adicionar marca d' água em inputs text com JQuery
Neste post vou explicar como aplicar marca d' água em inputs do tipo text usando a biblioteca JQuery.
Baixe a biblioteca JQuery em http://www.jquery.com/ e adicione ao projeto.
O código abaixo (Javascript e com uso da JQuery) aplica o feito de marca d' água. Cole o código num arquivo arquivo Javascript (.js) associado ao projeto.
//recuperando todos os inputs que tenham um atributo data-marcadagua.
var inputs = $('*[data-marcadagua]')
//tratando CADA input recuperado na linha acima.
jQuery.each(inputs, function () {
//se o input atual não tem valor, então aplica a marca d' água
if (jQuery.trim($(this).val()) == '') {
aplicaMarca($(this));
//adicionando os manipuladores para os eventos de entrada e saída em cada input.
$(this).bind('focusin',
//revomendo a marca d' água quando o input ganha o foco.
if ($(this).val() == $(this).attr('data-marcadagua')) {
limpaMarca($(this))
$(this).bind('focusout',
//aplicando a marca d' água quando o input perde o foco e não tem valor.
function aplicaMarca(input) {
input.css('font-style', 'italic');
input.css('color', '#666');
input.val(input.attr('data-marcadagua'));
function limpaMarca(input) {
input.css('font-style', '');
input.css('color', '');
No HEAD da página HTML, faça a vinculação da biblioteca JQuery e do arqvivo de script com o código acima.
<script src="marcadagua.js"></script>
A ideia aqui e adicionar aos inputs text da página um atributo chamado data-marcadagua, e o valor seu valor será o texto da marca d' água.
<input id="Text1" type="text" data-marcadagua="1 - Digite algo aqui..." value="Já tenho valor"/>
<input id="Text2" type="text" data-marcadagua="2 - Digite algo aqui..."/>
<input id="Text3" type="text" data-marcadagua="3 - Digite algo aqui..."/>
<input id="Text4" type="text" data-marcadagua="4 - Digite algo aqui..."/>
No exemplo acima usei diretamente um input HTML. Para usar no controle TextBox do ASP.NET, no evento Page_Load utilize o método Add da propriedade Attribute.
TextBox1.Attributes.Add("data-marcadagua", "5 - Digite algo aqui...");
Baixe aqui o exemplo completo.
Este post foi publicado em ASP.NET, C#, Dicas do dia-a-dia, JQuery e marcado com a tag Facebook, JQuery, popup em 6 de julho de 2011 por andremenegassi.
Criando uma janela Popup estilo Facebook com JQuery e ASP.NET.
O legal de usar o Facebook é copiar as ideias de suas implementações e aplicá-las em nossos projetos. 😛
Vou mostrar como fiz para criar uma janela Popup parecida com as que são usadas no Facebook. Acho que ficou legal :-).
Primeiramente, no projeto ASP.NET devemos criar um arquivo do tipo Generic Handler. O Generic Handler é como se fosse uma página ASP.NET mais leve, pois não tem interface HTML e eventos no servidor, etc. Possui apenas um método, o ProcessRequest(HttpContext context) que é responsável por processar as requisições que chegam.
No método ProcessRequest deve ser codificado o HTML que será enviado à página que fez a requisição ao Generic Handler.
public class HandlerJanelaExemplo : IHttpHandler
string containerId = "#" + context.Request.QueryString["containerId"];
string html = @"
<div class=""divPopup""
style=""left: 323.5px; top: 145.5px; width: 600px; position: fixed; z-index: 10001;"">
<div style=""margin: 10px"">
AQUI VOCÊ COLOCA O TÍTULO DA JANELA
<div style=""overflow: auto; height: 150px"">
AQUI VOCÊ COLOCA CONTEÚDO DA JANELA
<div style=""width: 590px; background-color: #CCCCCC; text-align: right; padding: 5px;"">
<input type=""button"" value=""Fechar"" onclick=""@acaoFechar"" class=""botaoFerramenta""/>
//DEFININDO A AÇÃO DO BOTÃO FECHAR (SIMPLEMENTE LIMPA O HTML DO SPAN DA PÁGINA QUE REQUISITOU A JANELA).
string acaoFechar = "$('" + containerId + @"').html('')";
html = html.Replace("@acaoFechar", acaoFechar);
Na página HTML que vai chamar a janela Popup deve existir um link e um elemento span. O link irá chamar uma função Javascript que utilizará JQuery para fazer uma requisição ao Generic Handler criado anteriormente. E o Generic Handler retornará o HTML contendo a janela Popup para função Javascript, que por sua vez atualizará o elemento span.
Código HTML da página.
<h1>Minha Página</h1>
<asp:HyperLink ID="hlkJanela" runat="server" NavigateUrl="javascript:;">Chamar janela...</asp:HyperLink>
<span id="spanPopup"></span>
Na página é necessário associar a função Javacript ao link pelo C#.
hlkJanela.Attributes.Add("onclick", "chamarJanela()");
A função Javascript usa JQuery para fazer a requisição ao Generic Handler. A informação URL recebe o endereço do Generic Handler e como parâmetro o ID do elemento span. O ID do elemento span será usado dentro do Handler para implementação do botão fechar da Popup.
function chamarJanela() {
url: "HandlerJanelaExemplo.ashx?containerId=spanPopup",
$("#spanPopup").html(retorno);
E é isso pessoal. É um exemplo bem simples que pode ser evoluido para uma solução robusta.
Baixe o exemplo para ver os detalhes da implementação.
Este post foi publicado em AJAX, ASP.NET, C#, JQuery e marcado com a tag Facebook, Janela, Javascript, JQuery, popup em 24 de junho de 2011 por andremenegassi.