20 de novembro de 2008

47Esqueça as funções javascript alert() e confirm()

Uma das coisas que mais me incomoda em sistemas web é a enorme quantidade de alertas do sistema. Confirmações, perguntas, informações — todos utilizando o visual padrão do sistema operacional. É impressionante a quantidade de sistemas que insistem em bombardear o usuário com os famigerados alert() e confirm() do javascript. No entanto, para nossa felicidade, a evolução do javascript permitiu que estes verdadeiros inimigos da usabilidade fossem substituídos por versões mais elegantes e amigáveis. Conheça uma delas, o plugin m2brDialog, para jQuery.

Apesar de neste artigo você conferir um método para substituir as janelas padrões de sistema, gostaria de começar com o seguinte conselho: evite o uso de confirmações. O Windows Vista é a maior prova de que inúmeras perguntas e avisos incomodam — e muito — qualquer usuário. Algumas alternativas incluem avisos de confirmação mais discretos, como o modelo lançado pelo Google, exibido no canto superior da tela, ou perguntas inline, exibidas de forma dinâmica diretamente no miolo do sistema. É claro que, em alguns casos, é necessário impedir que o usuário clique ou execute qualquer funcionalidade antes de confirmar a ação. É aí que entra o m2brDialog.

O objetivo principal deste plugin é substituir completamente o uso de alertas e confirmações padrões. Possui como dependências o framework javascript jQuery, além de sua extensão para interfaces caso você queira habilitar a opção de arrastar a janela. O m2brDialog funciona baseado no evento clique e seu visual é totalmente customizável, todo baseado em CSS — o tema padrão utiliza o set de ícones Tango, mas nada impede que você implemente suas próprias imagens.

Caso você precise de uma introdução ao jQuery, leia os primeiros parágrafos de meu artigo sobre uma interface drag and drop utilizando o framework.

Download: m2brDialog

Opções da extensão jQuery m2brDialog()

Confira o conjunto de opções disponíveis para configurar o alerta exibido:

largura valor inteiro que define a largura do aviso, em pixels
altura valor inteiro que define a altura do aviso, em pixels
tipo string indicando o tipo do aviso, estando disponíveis as seguintes opções: alerta, erro, pergunta e info
titulo string a ser exibida no título do aviso
texto conteúdo da mensagem do alerta
draggable true ou false para definir se o usuário pode arrastar e mover o aviso (depende da extensão jQuery UI)
botoes array com o conteúdo, tipo e links dos botões do aviso
tempoExibicao tempo de duração da exibição do alerta, em segundos
condicao array com funções que determinam a condição se o alerta deve ser exibido ou não (saiba mais abaixo)

m2brDialog na prática

Faça a chamada para os arquivos javascript do jQuery e do plugin m2brDialog dentro da tag head de seu HTML, bem como o link para a folha de estilos.

	<link rel="stylesheet" type="text/css" href="m2br.dialog.css" />
	<script src="jquery.js"></script>
	<script src="jquery.m2brdialog.pack.js"></script>
  

No exemplo abaixo, buscamos todos os elementos a (links) que possuam a classe "link-alerta" e atribuímos um alerta com a mensagem "Teste m2brDialog":

$(document).ready(function(){
	$('a.link-alerta').m2brDialog({
    	largura		: '300',
        altura		: '120,
        tipo		: 'alerta',
        titulo		: 'TESTE',
        texto		: 'Teste m2brDialog'
    });
});

Agora vamos criar uma janela de confirmação em todos os elementos com a classe "m2brdialog-pergunta", com os botões confirmar e cancelar. Caso o usuário clique em confirmar, será redirecionado para o link www.daviferreira.com. A janela também terá a propriedade de drag and drop:

$(document).ready(function(){
    $('.m2brdialog-pergunta').m2brDialog({
        tipo: 		'pergunta',
        titulo:		'Confirme',
        texto:		'Tem certeza que deseja executar esta operação?',
        draggable: true,
        botoes: {
            1: {
                label: 'confirmar',
                tipo: 'link',
                endereco: 'http://www.daviferreira.com'
            },
            2: {
                label: 'cancelar',
                tipo: 'fechar'
            }
        }
    });	
});    

Funções condicionais

Em alguns casos, precisaremos de uma condição para exibir ou não o alerta. Por exemplo, em um formulário, exibir a mensagem de alerta apenas se algum campo obrigatório não tiver sido preenchido. É para isto que serve o parâmetro de configuração avançada condicao. Esta propriedade recebe um vetor com duas funções. A primeira representa a condição e a segunda a URL de retorno caso esta condição seja verdadeira. Vejamos como funcionaria no exemplo do formulário citado anteriormente:

<form name="frm-newsletter" id="frm-newsletter" method="post" action="">
    <label for="email">Seu e-mail</label>
    <input type="text" name="email" id="email" size="60" />
    <input type="button" id="btn-newsletter" value="OK" />
</form>

<script type="text/javascript">
$(document).ready(function(){
    $('#btn-newsletter').m2brDialog({
        tipo			: 'erro',
        titulo			: 'Erro!',
        texto			: 'Por favor, preencha o campo e-mail',
        condicao		: {
            origem		: function() { 
							return ($('#email').val() ? true : false); 
			},
            retorno		: function() { return true; }
        }
    });
});
</script>

Note que na opção de configuração condicao são passados dois valores: origem e retorno. Na origem estamos validando o campo de id email, verificando se ele foi preenchido. Caso retorne true, ou seja, caso ele esteja preenchido, o alerta é ignorado e o script executa a função retorno — no nosso exemplo um simples return true;. O alerta de erro apenas será exibido caso o campo esteja vazio.

Demo: veja o m2brDialog em ação!

Pra finalizar, uma gambiarra

Nem sempre o alerta será exibido a partir de um clique em algum link ou botão. Uma função AJAX, por exemplo, pode retornar um alerta. Neste caso, utilizamos o código abaixo:

var alertaPadrao = function(titulo, msg, tipo, altura, largura) {
		$('body').append('<a href="#" id="alerta-padrao"></a>');
		$('#alerta-padrao').m2brDialog({
				draggable: true,
				texto: msg,
				tipo: tipo,
				titulo: titulo,
				altura: altura,
				largura: largura,
				botoes: {
					1: {
						label: 'Fechar',
						tipo: 'fechar'
					}
				}									   
		});
		$('#alerta-padrao')
			.click()
			.remove();
};

Sim, uma tremenda de uma gambiarra! O que este código faz é criar um elemento a, simular seu clique e depois destruí-lo. Vamos supor que sua função retorna um aviso de operação concluída. Seria só chamar o nosso alertaPadrao desse jeito:

<script type="text/javascript">
$(document).ready(function(){
	alertaPadrao('Informação:', 'Operação concluída com sucesso.', 'info', 110, 250);
});
</script>
  

E aí, curtiu? Em caso de dúvidas ou sugestões, envie um comentário utilizando o formulário abaixo. Até a próxima!

Atualizações [26/11/2008]

Código-fonte e arquivo CSS do script atualizados com correções enviadas pelo leitor Rômulo, envolvendo bugs nas versões 6 e 7 do Internet Explorer. Valeu, Rômulo! :)

Atualizações [08/12/2008]

A rapaziada levantou a bola nos comentários sobre como passar um código dinâmico para nossa janela de confirmação, para o caso de uma listagem com exclusão, por exemplo.

No código a seguir você confere como atingir este objetivo utilizando o método each() nativo do jQuery. O primeiro passo é criar o HTML da tabela. Note que no atributo id do a estou passando o código de nossos registros.

	
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="resultado">
	<thead>
		<tr>
			<th>Código</th>
			<th>Nome</th>
			<th>Ação</th>
		</tr>
	</thead>
	<tbody>
		<tr id="linha-1">
			<td>1</td>
			<td>Davi Ferreira</td>
			<td><a href="#" class="item-excluir" id="1"><img src="excluir.png" width="24" height="24" alt="excluir registro 1" /></a></td>
		</tr>
		<tr id="linha-2" class="alt">
			<td>2</td>
			<td>Rômulo</td>
			<td><a href="#" class="item-excluir" id="2"><img src="excluir.png" width="24" height="24" alt="excluir registro 2" /></a></td>
		</tr>
		<tr id="linha-3">
			<td>3</td>
			<td>Bruno</td>
			<td><a href="#" class="item-excluir" id="3"><img src="excluir.png" width="24" height="24" alt="excluir registro 3" /></a></td>
		</tr>
		<tr id="linha-4" class="alt">
			<td>4</td>
			<td>João Francisco</td>
			<td><a href="#" class="item-excluir" id="4"><img src="excluir.png" width="24" height="24" alt="excluir registro 4" /></a></td>
		</tr>
	</tbody>
</table>

Agora, através da chamada .each() varremos todos os elementos da tabela de resultado com a classe item-excluir e atribuímos nossa m2brDialog passando o código dos registros no Sim do botão.

$(document).ready(function(){
    $('table#resultado a.item-excluir').each(function(){
        var codigo = $(this).attr('id');
        $(this).m2brDialog({
            tipo: 		'pergunta',
            titulo:		'Confirme',
            texto:		'Tem certeza que deseja excluir o registro ID'+
                                '<span style="color:#ffff00">'+codigo+'</span>?',
            draggable: true,
            botoes: {
                1: {
                    label		: 'sim',
                    tipo		: 'link',
                    endereco	: 'excluir.php?codigo='+codigo
                },
                2: {
                    label		: 'não',
                    tipo		: 'fechar'
                }
            }
        });	
    });		
});

Clique aqui para conferir este exemplo.

47 leitores comentaram este artigo

  • 22/11/2008
    12:40

    rômulo (rasp) escreveu:

    Opa Davi!
    Conheci seu blog a pouco tempo e confesso que volta e meia estou sempre por aqui... gosto bastante do nível de seus posts...
    Então queria falar que o plugin está de parabéns! Muito maneiro... eu já utilizava alerts e confirms personalizados... porém sem opção de título e texto.

    Responder

  • 23/11/2008
    01:03

    Davi Ferreira escreveu:

    Valeu, Rômulo :) Espero publicar mais coisas em breve e com mais regularidade. Qualquer coisa tamos aí!

    Responder

  • 23/11/2008
    10:14

    rômulo (rasp) escreveu:

    Falae Davi... você tem algum lugar em que possamos dar dicas, sugestões, informar bugs e tal? pra contribuir tanto com você, quanto com a gente mesmo... Flwwws cara!
    Abss

    Responder

  • 23/11/2008
    11:41

    Davi Ferreira escreveu:

    Pode mandar aqui mesmo, ou então usa o formulário de contato lá em baixo. Ou ainda se preferir posta lá na parte de Issues em http://code.google.com/p/m2brdialog

    Responder

  • 25/11/2008
    23:57

    rômulo (rasp) escreveu:

    Opa Davi... Então... encontrei alguns bugs e resolvi 2 já... e espero com isso contribuir pra que o seu plugin seja um projeto 100%.

    * Já corrigidos:

    - erro na div Overlay no IE6 quando vc adiciona o plugin em determinados tipos de layout... testei com 3 tipos e em 2 apresentou erro... porém resolvi facilmente com uma regra (não hack) para interpretação.

    - o segundo erro de transparencia no IE7 que resolvi alterando seu hack do JS (ambos arquivos).


    Estou postando o link abaixo com as modificações que eu fiz... e espero que seja util para você.. e derrepente se for válido até para vc utilizar, não sei.

    http://scripts.logmania.net/m2brdialog.zip

    Espero estar ajudando.
    Forte abraço cara!

    Responder

  • 29/11/2008
    13:38

    Bruno escreveu:

    Salve Davi e Romulo blz??
    Cara jquery faz milagre...rs

    Estão.. estou com uma dúvida. Eu tenho um SELECT list assim:


    <option value= "">Selecione</option>
    <option value="NOME">Nome</option>
    <option value="LINK">Link</option>


    Notem que o primeiro campo está vazio.. o Selecione.

    Meu js ficou assim:

    ...
    $('#formulario').m2brDialog({
    tipo : 'alerta',
    titulo : 'Aviso!',
    texto : 'Por favor, selecione uma opção para a busca',
    condicao : {
    origem : function() { return ($('#campo').val() ? true : false); },
    retorno : function() { return true; }

    }
    });
    ...

    Na primeira vez ele exibe o aviso certinho. Ai quando eu clico na setinha para selecionar NOME ou LINK ele me mostra o aviso novamente, teria como corrigir isso??

    Obrigado!!

    Responder

  • 29/11/2008
    15:36

    Bruno escreveu:

    Opa.. mais uma coisa...

    tenho um

    for i...
    <a>ID_DINAMICO</a>
    ...

    ai como faço para clicar e mandar esse id para essa funçao


    ...
    botoes: {
    1: {
    label: 'sim',
    tipo: 'link',
    endereco: '?action=excluir_link&id='+ID_DINAMICO
    },
    2: {
    label: 'não',
    tipo: 'fechar'
    }
    ...


    valeu ai..

    Responder

  • 29/11/2008
    17:30

    Davi Ferreira escreveu:

    @Bruno: No caso do select, tem que chamar o m2brdialog no botão do formulário, e não no formulário. Se quiser manda o link pra eu entender melhor, mas acho que o erro foi esse.

    No ID dinâmico, passa ele como id ou rel do <a>. Por exemplo:


    <a id="ID_DINAMICO">ID_DINAMICO</a>
    ...
    endereco: '?action=excluir_link&id='+$(this).attr('id')

    Responder

  • 29/11/2008
    17:53

    Bruno escreveu:

    Davi, coloquei o arquivo teste.html aqui:
    http://www.studiotm.com.br/teste.rar

    No ID indefinido, depois tbm olhe o select..vc vai entender

    Obrigado mais uma vez e aguardo resposta..

    [s],

    Responder

  • 29/11/2008
    23:17

    Davi Ferreira escreveu:

    Bruno, te respondi por e-mail. Dá um confere lá! :)

    Responder

  • 30/11/2008
    11:04

    Bruno escreveu:

    Funcionou certinho DAVI..
    Obrigado... e posta mais novidades pra gente :P

    [s],

    Responder

  • 01/12/2008
    17:44

    rômulo (rasp) escreveu:

    Falaa galera!
    Achei interessante a aplicação que o bruno fez... e derrepente seria uma boa pra usar como exemplo de demo do plugin que achas Davi?...
    Ex: eu engatinho em JS e sinceramente nunca consegui fazer transferencia de informações 100%, e pra váriar no exemplo do Bruno... meu atributo ID no input tipo button não informa...


    Davi... estou fazendo aquelas modificações que combinamos ok? PNG já está ok, agora só falta eu terminar CSS
    Abss cara!

    Responder

  • 04/12/2008
    16:48

    Joao Francisco escreveu:

    eaew Davi, beleza?
    cara, curti pakas o teu script , tá mto legal usar ele !!
    porém estou com um problema similar ao do bruno !
    estou precisando que ao ele confirmar uma operação , um ID seja passado para a prox tela, no meo caso eu estava chamando outro JS que iria chamar o php responsavel pela ação mesmo (mas nao necessariamente precise ser assim né =p ). Porém nao sei como fazer utilizando a sua biblioteca nesse caso, teria como me dar uma força ?
    vc tem gtalk ou msn ?
    se puder me add

    vlw

    Responder

  • 04/12/2008
    17:40

    Davi Ferreira escreveu:

    @João: Até o fim de semana vou publicar um exemplo com esse lance dos IDs. Removi seus e-mails do comentário pra evitar que você receba SPAM, mas anotei aqui :)

    Responder

  • 04/12/2008
    18:46

    Joao Francisco escreveu:

    beleza !!!

    entao kara, eu consegui fazer a treta ake, eu vi qi tu passo uma forma pro bruno fazer, mas tava dando o cod undefined, ae qiqi eu fiz, fui lah , criei otra função iguau o alertaPadrao soh qi fiz perguntaPadrao, ae adicionei o parametro cod no fim do paranteses e lah no endereco colokei essa variavel , ae na hora di chama o js eu passo no lugar certo o e ae ele passa certinho =)

    mas eh uma boa tu coloca um exemplo sim!!

    otra coisa qi eu axo legal eh tu comentar o css , ta certo que o nome sugere jah o onde ele atua, mas eu aqui comentei todas as classes pra fica mais facil pra personalização ^^

    vlw ai grandee!

    Responder

  • 04/12/2008
    19:35

    rômulo (rasp) escreveu:

    Falae galera!
    Pra quem tiver alguma dúvida ainda... resolvi da seguinte forma...

    Resgato o ID:

    var idCliente = $('.cliente').attr('id');

    Printo o ID

    'excluir_cliente.php?id='+idCliente

    Creio que não deva ser a melhor solução... mais é funcional ;D

    Ps: Davi estamos aguardando os novos exemplos =D
    abs

    Responder

  • 11/12/2008
    00:21

    rômulo (rasp) escreveu:

    Grande Davi!!!
    Pô cara, muito bom o exemplo... e convenhamos mais correto que o usei acima rsrs

    Pra variar Parabéns cara!!

    Absss

    Responder

  • 14/12/2008
    22:44

    Marco Gomes escreveu:

    Boa implementação.

    Minha dica é: tome cuidado pra não abusar de interfaces modais, elas normalmente mais atrapalham que ajudam. Já escrevi sobre:
    http://marcogomes.com/blog/2007/interfaces-humanas-modais-e-quasimodais-jef-raskin

    Responder

  • 15/12/2008
    12:26

    Deiverson escreveu:

    Parabéns cara! Muito bom!

    Responder

  • 03/02/2009
    17:41

    Marco escreveu:

    como faço para utilizar o tipo script nos botões?

    Responder

  • 05/02/2009
    16:28

    Davi Ferreira escreveu:

    @Marco: segue o mesmo padrão dos links. Tem inclusive no exemplo um formulário utilizando o m2bralert no botão.


    $('#btn-newsletter').m2brDialog({
    draggable : true,
    tipo : 'erro',
    titulo : 'Erro!',
    texto : 'Por favor, preencha o campo e-mail',
    condicao : {
    origem : function() { return ($('#email').val() ? true : false); },
    retorno : function() { return true; }
    }
    });

    Responder

  • 06/02/2009
    16:18

    Marco escreveu:

    @Davi Ferreira

    Obrigado, funcionou muito bem.

    Responder

  • 25/02/2009
    12:49

    Bruno escreveu:

    Salve Davi e pessoal blz??? É que legal que minha aplicaçãozinha gerou uma implementação do mestre... hehehe...

    Bom seguinte, trago um outro problema(como sempre). Estou com problemas no uso do jquery e prototype.

    O problema é de conflito, eu consegui resolver em outros plugins usando http://docs.jquery.com/Using_jQuery_with_Other_Libraries mais com m2brDialog eu não consegui...

    alguém poderia dar uma luz??rs

    Responder

  • 26/02/2009
    14:22

    Davi Ferreira escreveu:

    Fala, Bruno :)

    O ideal seria eu adaptar o plugin pra aceitar um seletor diferente do "$". Mas ando meio sem tempo :P

    O que você tem que fazer é editar direto o m2brdialog.js e alterar os "$(" por "jQuery(" ou qualquer outro seletor personalizado que vá utilizar.

    Responder

  • 27/02/2009
    01:54

    Fernando escreveu:

    Pessoal,

    Como valido mais campos e apresento o nome de todos que nao foram preenchidos em um unico alert?

    Tipo em um form de contato (nome, email, assunto e mensagem) todos sao obrigatorios. Dai quando o usuario clica no enviar abro um alert informando os campos que ele nao preencheu.

    Show este artigo.

    Valew

    Responder

  • 06/03/2009
    11:08

    Thiago Domingues escreveu:

    Olá, tive problemas no IE7 que num alert não aparece o botão de fechar. Alguém sabe o que é? Vlw..creio que seja algo como o rômulo disse. O link do Rômulo não tá funcionando

    Responder

  • 06/03/2009
    17:42

    Thiago Domingues escreveu:

    resolvi usando a versão do jquery vinda junto com o pacote de down do br2dialog...porém tenho problemas com o chrome....no tipo de botão 'script' não reconhece a function().

    Responder

  • 14/04/2009
    19:11

    Paulo Reis escreveu:

    Olá Davi, cara show de bola esse artigo.

    Sou novo no JavaScript e tenho uma dúvida bem básica: Como faço para validar mais de um campo do formulário?

    Responder

  • 20/05/2009
    19:37

    Leandro escreveu:

    teria como em vez do click ele utilizar um enter por exemplo...pra sair da tela mostrada pela classe...como poderia fazer isso...

    desde ja agradeço...

    Responder

  • 09/06/2009
    12:03

    Ednaldo escreveu:

    Achei muito interessante o post...
    É uma forma de personalizar as solicitações enviadas aos usuários, substituindo assim a confirmação padrão que é exibida pelo browser.

    Parabéns..........

    Responder

  • 04/07/2009
    16:56

    Leandro escreveu:

    Boa tarde, ótima dica, gostaria de saber se é possível enviar um comando para o botão fechar do browser |X|, tipo de suporte online, você clica em fechar então aparece um alerta que ao clicar em ok redireciona para a página logout, pode ser em javascript mesmo, agradeço a atenção se estiver beleza, se responder agradeço duas vezes, abraço

    Responder

  • 19/08/2009
    18:06

    Geraldo Augusto escreveu:

    Davi, parabéns pelo plugin. Já comecei a implementar em um projeto.
    Estou tendo uma dificuldade que é de visualização das imagens de alerta, pergunta, aviso, no IE6; inclusive os seus exemplos postados no blog.

    Responder

  • 26/10/2009
    10:55

    Edgar escreveu:

    Davi Parabéns,

    Dúvida: como faço para no momento onclick chamar a função confirm já utilizando o plugin? de uma olhada a baixo e veja o que está errado por favor.

    no código dá página está assim:


    LblExcluir.Text = ""


    no html da página está assim:


    $(document).ready(function testar(){
    $('confirm').m2brDialog({
    largura : '300',
    altura : '120',
    tipo : 'alerta',
    titulo : 'TESTE',
    texto : 'Teste m2brDialog'
    });
    });

    Responder

  • 27/10/2009
    08:55

    Davi Ferreira escreveu:

    Fala Edgar!

    Não sei se entendi muito bem sua dúvida, mas acho que é como o meu exemplo do botão de pergunta, só que ao invés de um endereço você usa uma função como retorno.

    Cuidado com esse testar aí no seu document.ready, tem que ser só :)


    $(document).ready( function() {
    /* seu código */
    });


    Ou melhor ainda:


    $(function(){
    /* seu código */
    });


    (pra postar código nos comentários é só utilizar tag <code>)

    Responder

  • 26/10/2009
    10:57

    Edgar escreveu:

    infelizmente não foi possível postar o código! foi bloqueado

    Responder

  • 27/10/2009
    10:19

    Edgar escreveu:

    Blz Davi,

    resolvi o problema, porém ainda tenho uma dúvida: Em qualquer situação que testo está funcionando perfeitamente porém em páginas com dropdownlist estes desaparecem ao aparecer e caixa mudando o lay out da página e reaparecem quando a caixa confirm/alert é fechada. Como posso resolver issa?

    Antecipo agradecimentos e não posso deixar de dizer que o plugin é muito bom, design programabilidade em alto nível.

    Edgar

    Responder

  • 27/10/2009
    11:33

    Davi Ferreira escreveu:

    Beleza, Edgard!

    As listas são escondidas quando o alert aparece, pra evitar um bug que rola em navegadores antigos, da lista sempre ficar por cima do alert. Aí só editando o código fonte mesmo, procura lá o método que tenha $('select').hide() e comenta. Depois se rolar um tempo coloco uma opção no plugin pra isso. Valeu!

    Responder

  • 29/10/2009
    16:41

    Wellington escreveu:

    Outros alertas legais:

    http://malsup.com/jquery/block/#demos (O Growl é style)

    http://www.pinceladasdaweb.com.br/blog/2008/08/21/sexy-alert-box-ou-como-mostrar-alertas-com-estilo/ (Sexy Alert Box)

    http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

    Responder

  • 31/10/2009
    05:01

    André Xori escreveu:

    Olá Davi,

    Primeiramente, parabéns pelo blog. Já está favoritado :) E parabéns pelo plugin tb. Muito bom. Passei o dia fuçando ele e tentando entender melhor. Ainda não sou muito bom com javascript, então to penando.

    Queria saber como fazer validação de vários campos em um form. Eu consegui fazer em um, mas quando tento fazer em vários não da certo.

    Fiz a chamada no botão do form mesmo. Tem uma dica ae?
    Abração

    Responder

  • 03/11/2009
    01:01

    Augusto Cezar escreveu:

    Boa noite Davi!

    Primeiramente parabéns pelo plugin m2brDialog pois, era o que eu estava procurando, gostei muito rsrs! Porém infelizmente na apliacação que estou terminando está comflitando com outro plugin que é GreyBox que estou usando, onde o m2brDialog não funciona nem dos vários modos que testei e nem com os modelos postados neste blog, talvéz eu esteja fazendo alguma coisa errada, espero, mas no meu caso ou é um ou é outro plugin que funciona porque os dois não se entendem rsrs!!! Quando terminar essa aplicação e com um pouco mais de tempo irei realizar outros testes para tentar descobrir o que está havendo e colocar m2brDialog para rodar junto com o GreyBox.

    T+

    Responder

  • 16/11/2009
    15:30

    Cleiton escreveu:

    Amigos, o m2br não funciona direito do IE8....

    A transparencia não funfa! Algumem já tem solução?

    Responder

  • 07/01/2010
    17:16

    Caio Ruival escreveu:

    estou precisando de sua ajuda.
    Estou utilizando o script m2brDialog para exibir um confirm button customizado.

    Mas encontrei um problema:
    Gostaria de após o confirm button quando o usuário clicar em 'SIM' eu quero que a página seja submetida.

    EX:
    script:

    $(document).ready(function(){

    $('.m2brdialog').m2brDialog({texto:'PAM! O fim dos alertas!'});

    $('.m2brdialog-pergunta').m2brDialog({
    tipo: 'pergunta',
    titulo: 'Confirme',
    altura: '138',
    texto: 'O registro digitado para emissão donCertificado de Origem, será enviadonpara análise e estará sujeito a cobrançanapós sua confirmação.nnDeseja continuar?',
    draggable: true,
    botoes: {
    1: {
    label: ' SIM  ',
    tipo: 'script',
    script: submitForm()
    },
    2: {
    label: ' não ',
    tipo: 'fechar'
    }
    }
    });

    Algum dica???

    Responder

  • 07/01/2010
    17:30

    Caio Borges escreveu:

    Consegui.

    Ficou assim:
    botoes: {
    1: {
    label: 'SIM',
    tipo: 'link',
    endereco: 'javascript:document.form.submit();'

    Responder

  • 23/03/2010
    11:24

    Charles escreveu:

    Olá Davi, primeiramente parabéns pelos ótimos posts e especialmente por este plugin. Eu achei ele muito bom, mas estou com um problema na implementação dele aqui. Como já testei uns mil plugins do gênero e achei o seu o melhor (pelo menos para as minhas necessidades), não gostaria de deixar de usá-lo por causa de uma pedra no caminho... então gostaria de apelar para a sua ajuda:

    Estou usando este código:
    ("a.confirma").m2brDialog({
    tipo: "pergunta",
    titulo: "Confirme",
    texto: "Tem certeza que deseja executar esta operação?",
    draggable: true,
    botoes: {
    1: {
    label: "Sim",
    tipo: "link",
    endereco: "" + $(this).attr("href") + ""
    },
    2: {
    label: "Não",
    tipo: "fechar"
    }
    }
    });
    Ali no endereço, ele não está captando o href do link, e nem mesmo qualquer outro atributo do mesmo. Depois de alguns testes, descobri que o "this" está pegando os atributos da janela, e não do elemento clicado. Teria alguma explicação ou solução para isto? Ou ainda não teria um jeito simples do botão 1 apenas confirmar o click do link e o botao 2 cancelar o click?

    Se puder me ajudar ficarei muito grato, abraço.

    Responder

  • 08/06/2010
    05:22

    Giu escreveu:

    Bacana, guardado em favoritos ^^

    ----------------------------------------------
    A maior estrutura em L2, feito por profissionais em TI.
    L2 Keracross Lineage2 - Um novo mundo em suas mãos
    www.keracross.com.br

    Responder

  • 11/06/2010
    06:14

    snake escreveu:

    iai blz
    como que eu faço pra fazer um botão para passar de uma pagina pra outra atravez de um array ou funçao onde os links ficariao armazenados na função ou no array semelhante esses ulzados em sites pra se baixar filmes que se ultiliza muintas paginas as minhas tão sendo puxadas por includes

    Responder

  • 23/07/2010
    16:46

    Marcelo Kenji escreveu:

    Ola Davi, primeiramente parabéns pelo seu blog.
    Já aproveitei muito suas dicas principalmente a da manipulação de imagens e agora essas funções de alert().
    Falando nisso, estava testando no IE8 e a transparencia não funciona.
    Já tem alguma solução para esse caso?

    _______________________________________
    Marcelo Kenji - Programador Web
    www.marcelokenji.com.br
    www.marcelokenji.com.br/blog

    Responder

Deixe seu comentário

Todos os campos são obrigatórios.

(Seu e-mail não será divulgado - serve apenas para validação e gravatar.)

(Tags HTML permitidas: <strong> <em> <code> <a>)

Cancelar ou Salvar

Receber alertas?

Opções

Ordenar por

Modo de exibição