Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

diegoaugusto

Colocar alert javascript em div

Recommended Posts

Tem algumas maneiras de manipular o estilo dele manual, mas particularmente eu nunca tentei.

 

Uma vez eu utilizei essa biblioteca para alert personalizado e notificações:

http://lobianijs.com/site/lobibox#lobibox-messageboxes

 

Mas você pode usar algum pronto de algum framework, eu por exemplo acho o do UIkit agradável:

https://getuikit.com/docs/modal

Compartilhar este post


Link para o post
Compartilhar em outros sites

eu achei um exemplo aqui:

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>

<script src="https://github.com/makeusabrew/bootbox/releases/download/v4.4.0/bootbox.min.js"></script>


<div class="container">
  <br>
  </div>
    <script type="text/javascript">
        bootbox.alert("Hello World");

$('#abrir').click(function(event){
  bootbox.alert('Oi, eu sou um alert.', function(){
    bootbox.alert('Oi eu sou um alert chamado apartir de um callback de outro alert.');
  });
});
    </script>

o unico problema e que quando o usuario clicar em ok preciso que direcionasse a uma pagina.

 

coloquei o codigo de redirecionar so que ele volta antes de clicar em ok.

 

location.href="index.php";

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
2 minutos atrás, diegoaugusto disse:

vi aqui, mais no meu caso precisa ser algo automatico sem a necessidade de se clicar, sabe como faço isso?

 

Usando esse plugin que eu mandei:

 swal({
            title: "Atenção",
            text: "Para salvar, escolha um valor no campo",
            allowOutsideClick: false,
            allowEscapeKey: false,
            type: "warning",
            showCancelButton: false,
            confirmButtonColor: "#007AFF",
            confirmButtonText: "Voltar",
            closeOnConfirm: true
        }, function () {
            // Aqui vai a resposta, só colocar o código de redirecionar aqui
      
        });

Seria isso ? redirecionar depois de clicar em 'ok' ?

Compartilhar este post


Link para o post
Compartilhar em outros sites

a parte de redirecionar eu já fiz aqui.

O problema e que quando executar a pagina esse alerta já deve abrir e não clicar nele para abrir.

 

Pois é uma pagina de login, assim ele já mostra que o usuario não foi encontrado e pede para voltar.

Compartilhar este post


Link para o post
Compartilhar em outros sites
3 minutos atrás, diegoaugusto disse:

a parte de redirecionar eu já fiz aqui.

O problema e que quando executar a pagina esse alerta já deve abrir e não clicar nele para abrir.

 

Pois é uma pagina de login, assim ele já mostra que o usuario não foi encontrado e pede para voltar.

 

Ata, entendi, faz assim então:

 

Muda o seu

Citar

$('#abrir').click(function(event){

 

Por:

 

Citar

$(document).ready( function(event){

 

Provavelmente é isso

Compartilhar este post


Link para o post
Compartilhar em outros sites

desculpa minha ignorancia, mais ainda estou aprendendo apanho bastante.

 

<script type="text/javascript">
document.querySelector('ul.examples li.warning.confirm button').onclick = function(){
	swal({
		title: "Erro de usuário",
		text: "Usuario ou senha não encontrado!",
		type: "erro",
		showCancelButton: true,
		confirmButtonColor: '#DD6B55',
		confirmButtonText: 'Digitar senha correntamente!',
		closeOnConfirm: false
	},
	function(){
		location.href="index.php";
	});
};
    </script>

aonde eu alteraria?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Puts, semana passada eu tava com essa duvida, sendo que estava pensando em criar uma div que seria um tipo de alerta. Só apareceria quando eu tivesse que tomar decisões. E com CSS simples eu poderia estilisala livremente. Mas como não fiz só fiquei com a ideia na mente. A sua pergunta é boa por que abre novos horizontes pra mim.

Compartilhar este post


Link para o post
Compartilhar em outros sites

 

2 minutos atrás, diegoaugusto disse:

desculpa minha ignorancia, mais ainda estou aprendendo apanho bastante.

 


<script type="text/javascript">
document.querySelector('ul.examples li.warning.confirm button').onclick = function(){
	swal({
		title: "Erro de usuário",
		text: "Usuario ou senha não encontrado!",
		type: "erro",
		showCancelButton: true,
		confirmButtonColor: '#DD6B55',
		confirmButtonText: 'Digitar senha correntamente!',
		closeOnConfirm: false
	},
	function(){
		location.href="index.php";
	});
};
    </script>

aonde eu alteraria?

 

Do modo que você ta fazendo ai, você está dizendo:

 

Quando o usuário clicar no botão 'ul.examples li.warning.confirm button' exibir o alerta que o login está errado.

Pra esse alerta ser exibido ja quando a página for carregada, ele tem que ser carregado quando o 'elemento' estiver pronto, no caso:

 

<script type="text/javascript">

$(document).ready(function(){
	swal({
		title: "Erro de usuário",
		text: "Usuario ou senha não encontrado!",
		type: "erro",
		showCancelButton: true,
		confirmButtonColor: '#DD6B55',
		confirmButtonText: 'Digitar senha correntamente!',
		closeOnConfirm: false
	},
	function(){
		location.href="index.php";
	});
)};
    </script>

Mas eu não entendi muito bem o que você ta querendo fazer com esse alert, pois do modo que está agora, ele não está validando login nem fazendo nada, apenas aparece um alerta 'sem utilidade', tenta dar um explicada no contexto que você ta tentando trabalhar com isso, ai da pra ver um modo melhor de se fazer talvez.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Quando faço login no meu sistema o sistema faz uma comparação se este usuario existe no banco de dados.

 

Hoje ele da um alerta em javascript:

 

<script>alert('Usuario ou senha não encontrado')

      location.href='index.html';</script>";

Só que alertas do javascript e muito feio e todo meu sistema possui validações bonitas do bootstrap.

 

Queria que esse alerta ficasse dentro de uma caixa box com uma boa aparencia e não como é o alerta do javascript.

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 09/05/2017 at 10:59, diegoaugusto disse:

Quando faço login no meu sistema o sistema faz uma comparação se este usuario existe no banco de dados.

 

Hoje ele da um alerta em javascript:

 


<script>alert('Usuario ou senha não encontrado')

      location.href='index.html';</script>";

Só que alertas do javascript e muito feio e todo meu sistema possui validações bonitas do bootstrap.

 

Queria que esse alerta ficasse dentro de uma caixa box com uma boa aparencia e não como é o alerta do javascript.

Conseguistes uma solução para seu problema?

O "alert" acaba com a beleza de qualquer site. Porém o "sweetalert" não funciona aqui tbm, apenas o "alert"

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
    • Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • Por juliosonic
      Boa noite..
      Estou desenvolvendo um site de https://www.maithunatantra.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>  
      Massagem Tantrica em Curitiba
      Tantra Curitiba
      Massagem Tântrica
      Tantra
      Julio Darshan

      Obrigado
      Att
      Julio Cezar
       
       
       
    • Por belann
      Olá!
       
      Estou fazendo o upload de arquivos com fetch dessa forma
      fetch(url, {
              method: 'POST',
              headers: {'Content-Type': 'multipart/form-data',},
              body: formData 
          }).catch((error) => (console.log("Problemas com o Upload"), error));
       
      estou usando input type=file
      e criando uma const formData = new FormData(); 
      mas não faz e não dá nenhum erro.
      estou fazendo o upload com a url="http://localhost/dashboard/dados".
    • Por Felipe Medeiros
      Bom, criei um tema filho e o que aprendi é que para alterar qualquer coisa do tema filho eu preciso copiar o arquivo do tema pai o colocar dentro da pasta do tema filho.
       
      No meu caso, estou usando o tema "Astra" bem famosinho. O arquivo css que quero modificar não está dentro da pasta do tema pai, está em "wp-content/uploads/uag-plugin/assets/0/uag-css-10.css" sendo que o diretorio do tema pai é "wp-content/themes/Astra"
       
      O problema é o seguinte, preciso modificar a barra de pesquisa da pagina inicial, porem o inspetor de elementos do chrome ta acusando que esse arquivo é o responsavel por estilizar a barra de pesquisa. Será que isso tem a ver com "Cache de objetos", eu sei que o plugin liteSpeed Cache, AMP, Rank Math, todos eles tem essas paradas de criar arquivos css e js para tornar o site mais rapido.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.