Publicado em 23 de fev.

[Resolvido] Janela modal (alert, confirm) com Fallr

Dae galera, existem esses alerts aqui:

Segue o código de alguns:

<script>
 $(window).load(function() {
 $('#alert').click(function() {
 $.fallr({
 content : "<h1>Testando acentuação</h1><p>Hello from fallr!</p>",
 position : 'center',
 autoclose : 3000
 });
 });

 $('#confirm').click(function() {
 var clicked = function(){
 alert('congrats, you\'ve deleted internet');
 $.fallr('hide');
 };

 $.fallr('show', {
 buttons : {
 button1 : {text: 'Yes', danger: true, onclick: clicked},
 button2 : {text: 'Cancel', onclick: function(){$.fallr('hide')}}
 },
 content : '<p>Are you sure you want to delete internet?</p>',
 icon : 'error'
 });
 });

 $('#prompt').click(function() {
 var clicked = function(){
 var yourname = $(this).children('form').children('#yourname').val();
 alert('Hello, ' + yourname);
 $.fallr('hide');
 };

 $.fallr('show', {
 buttons : {
 button1 : {text: 'Submit', onclick: clicked},
 button2 : {text: 'Cancel'}
 },
 content : '<p>Give me your name</p><form><input type="text" id="yourname" /'+'></form>',
 icon : 'form'
 });
 });

 $('#form').click(function(){
 var login = function(){
 var user = $(this).children('form').children('input[type="text"]').val();
 var pass = $(this).children('form').children('input[type="password"]').val();
 if(user.length < 1 || pass.length < 1){
 alert('Invalid!\nPlease fill all required forms');
 } else {
 alert('username: '+user+'\npassword: '+pass);
 $.fallr('hide');
 }
 }

 $.fallr('show', {
 icon : 'secure',
 width : '320px',
 content : '<h4>Sign in</h4>'
 + '<form>'
 + '<input placeholder="Username" type="text"/'+'>'
 + '<input placeholder="Password" type="password"/'+'>'
 + '</form>',
 buttons : {
 button1 : {text: 'Submit', onclick: login},
 button4 : {text: 'Cancel'}
 }
 });
 });

 $('#no-overlay').click(function(){
 $.fallr('show', {
 content : '<p>Yay, no overlay!</p>',
 icon : 'info',
 useOverlay : false
 });
 });
 });

	</script>

O que eu queria fazer, é substituir o alert tradicional que eu uso para cadastrar/alertar algo por esse em jquery.

O que uso atualmente é nesse estilo:

Como eu faria para exibir esse alert sem clicar em nada?

Creio que a parte do código é essa:

$('#alert').click(function() {
 $.fallr({
 content : "<h1>Testando acentuação</h1><p>Hello from fallr!</p>",
 position : 'center',
 autoclose : 3000
 });
 });

Talvez substituir o click por algo, mas o que?

Muito obrigado!

Discussão (16)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

William Bruno· 23 de fev.

basta remover o click, ne?!

<script>
$.fallr({

 content : "<h1>Testando acentuação</h1><p>Hello from fallr!</p>",
 position : 'center',
 autoclose : 3000
});
</script>

lembrando que isso deve vir depois de você carregar o arquivo do plugin.

Buthy· 23 de fev.

Ok!

Mas é o seguinte, eu faço o formulário em certo arquivo, e o envio dos dados para o BD em outro arquivo...

Daí essa janela modal deveria aparecer depois que o dado for cadastrado...

Só que carrega muito rápido, e não dá tempo de aparecer a janela...

Teria algum delay? Ou talvez fazer de outro jeito...

Tem o formulário normal, daí no arquivo php que faz o envio dos arquivos estaria mais ou menos assim:

if ($email_check > 0){
 echo "<script>
 $(window).load(function() {
 $.fallr({
 content : '<h5>Erro ao cadastrar</h5><p>O e-mail que você digitou já está sendo utilizado por outro usuário.</p>',
 icon : 'alert',
 autoclose : 3000
 });
 });
 </script>";

 unset($email);

 }
 echo "<script> window.location='../index.php?pri=cad_usu';</script>";

Alguma idéia?

William Bruno· 23 de fev.

Oi @Buthy, nesse caso eu sugiro que você mude a interação.

Ou você envia com ajax os dados para o banco, ou você só mostra a mensagem depois q o cadastro fizer o redirect de volta.

Buthy· 24 de fev.

Se eu optar por fazer depois que o cadastro fizer o redirect, eu teria que passar algum valor pela url, dai utilizar algum if na página para exibir o alert, isso?

Ajax eu não entendo muito, teria algum tutorial de como fazer isso?

Lembrando que serao vários cadastros...

Obrigado!

William Bruno· 24 de fev.

Se eu optar por fazer depois que o cadastro fizer o redirect, eu teria que passar algum valor pela url, dai utilizar algum if na página para exibir o alert, isso?

sim, pensei em exatamente isso.

>
Ajax eu não entendo muito, teria algum tutorial de como fazer isso?

exemplo com ajax:http://wbruno.com.br/2012/01/20/enviar-formulario-para-php-sem-refresh-jquery-ajax/

Buthy· 25 de fev.

>
sim, pensei em exatamente isso.

exemplo com ajax:

http://wbruno.com.br/2012/01/20/enviar-formulario-para-php-sem-refresh-jquery-ajax/

Certo, eu fiz sem Ajax...

Tem outra coisa...

Teria um link:

<a href="remover.php?id=$id>" id="remover">Remover</a>

Daí para exibir um alerta para confirmar:

<script>
	$('#remover').click(function() {
 var clicked = function(){
 alert('congrats, you\'ve deleted internet');
 $.fallr('hide');
 };

 $.fallr('show', {
 buttons : {
 button1 : {text: 'Sim', danger: true, onclick: clicked},
 button2 : {text: 'Cancelar', onclick: function(){$.fallr('hide')}}
 },
 content : '<h5>Atenção</h5><p>Você tem certeza de que deseja remover estes dados?</p>',
 icon : 'error',
 position: 'center'
 });
	});
</script>

O alerta está carregando, mas não dá tempo de aparecer totalmente, pois ele já vai para o remover.php, sem exibir o Sim e o Cancelar...

No lugar do "alert('congrats, you\'ve deleted internet');" o que eu teria que por para ir para o remover.php somente depois de clicar em Sim?

E caso clicar em Cancelar, para não ir p/ o remover.php e continuar na mesma página?

William Bruno· 26 de fev.

$('#remover').click(function( e ) {
 e.preventDefault();

Buthy· 26 de fev.

$('#remover').click(function( e ) {
 e.preventDefault();

Então cara, eu fiz assim...

Ele apareceu e tudo, mas ele não para até que responda a pergunta.. ele aparece e depois segue pro remover.php...

<script>
	$('#remover').click(function() {
 var clicked = function( e ){
 e.preventDefault();
 };

 $.fallr('show', {
 buttons : {
 button1 : {text: 'Sim', danger: true, onclick: clicked},
 button2 : {text: 'Cancelar', onclick: function(){$.fallr('hide')}}
 },
 content : '<h5>Atenção</h5><p>Você tem certeza de que deseja remover estes dados?</p>',
 icon : 'error',
 position: 'center'
 });
	});
</script>

William Bruno· 27 de fev.

você fez errado.

$('#remover').click(function( e ) {
 e.preventDefault();//impede q siga

 var clicked = function(){
 document.location.href = 'remover.php';//agora sim, manda seguir, pois só cai aqui, se clicar em SIM
 };

Buthy· 27 de fev.

Certo..

E como eu passaria o valor do id que é uma variável php?

William Bruno· 27 de fev.

$('#remover').click(function( e ) {
 e.preventDefault();//impede q siga

 var $this = $( this );

 var clicked = function(){
 document.location.href = $this.attr('href');//agora sim, manda seguir, pois só cai aqui, se clicar em SIM
 };

pronto.

Buthy· 27 de fev.

$('#remover').click(function( e ) {
 e.preventDefault();//impede q siga

 var $this = $( this );

 var clicked = function(){
 document.location.href = $this.attr('href');//agora sim, manda seguir, pois só cai aqui, se clicar em SIM
 };

pronto.

Opa! Certinho agora...

Muito obrigado William!

Aproveitando...

você sabe algum curso bom de JavaScript/Jquery? Tava vendo um na Caelum, mas não sei se talvez tem algum outro lugar melhor ou mais barato...

Valeuu!

Bruno Augusto· 27 de fev.

William, posso perguntar porque não só você mas vários outros entendidos do assunto fazem isso:

var $this = $( this );

Quando há problemas na resolução do escopo this, e consequentemente $(this), eu até entendo, mas nesses outros casos, não.

A propósito, achei esse Fallr muito bacana. Talvez eu até use nos meus projetos, já que o jQuery UI Dialog é um sufoco de estilizar.

Buthy· 27 de fev.

>
A propósito, achei esse Fallr muito bacana. Talvez eu até use nos meus projetos, já que o jQuery UI Dialog é um sufoco de estilizar.

Poisé cara, tinha testado vários outros, mas o melhor que encontrei foi o Fallr, você consegue deixar ele praticamente do jeito que quiser ehehe

William Bruno· 27 de fev.

>
Quando há problemas na resolução do escopo this, e consequentemente $(this), eu até entendo, mas nesses outros casos, não.

ok.. imagine o seguinte, @Bruno chará:

$('.elemento').click(function(){
 e.preventDefault();
 $( this ).addClass('tal');
 $( this ).parent('li').addClass('tal');
 $( this ).find('span').addClass('tal');
});

fiz 3 chamadas à função básica do jQuery $(), certo ?

$('.elemento').click(function(){
 e.preventDefault();
 var $this = $( this );
 $this.addClass('tal');
 $this.parent('li').addClass('tal');
 $this.find('span').addClass('tal');
});

Dessa vez fiz uma única chamada, guardei em uma var, e usei esse objeto pronto.

Não precisei ir novamente buscar algo que eu já tinha. (muito mais rápido).

Ou ainda posso fazer:

$('.elemento').click(function(){
 e.preventDefault();
 with ( $( this ) )
 {
 addClass('tal');
 parent('li').addClass('tal');
 find('span').addClass('tal');
 }
});

Dessa última forma, tenho o desempenho melhor por apenas buscar o $( this ), uma única vez, e além disso, não usar nem espaço extra na memória apenas para guardar uma variável 'lixo'.(temporária)

Questão de performance mesmo. :lol:

ps: conheço uma forma com css muito melhor de resolver o problema que propus aqui, mas leve em consideração apenas como exemplo, e abstraia a implementação, e aplicação real.

Francisco Brito· 23 de mai.

So mesmo para agradecer aos exemplos do William Bruno e dizer que este post foi muito útil para mim.

Obrigado!