Jump to content
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

Share this post


Link to post
Share on other 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";

 

Share this post


Link to post
Share on other 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' ?

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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?

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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.

 

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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"

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Anonicah
      Olá preciso de ajuda com esse exercício. Montei até a parte de formulário + validação de javascrip no dreamweaver mas buguei com o resto. O que eu fiz:
       

      <html>
      <head>
      <title> Formulário CPF validado com Java Script </title>
          
          <script language="javascript" type="text/javascript">
      function validar() {
      var cpf = form1.cpf.value;
          
      if (cpf == "") {
      alert('Preencha o campo com seu cpf');
      form1.cpf.focus();
      return false;
      }
          
      }
      </script>
          
          
      </head>
      <body>
      <form name="form1" action="enviar.php" method="post">
      CPF:
      <input name="cpf" type="text"><br /><br />
      <input type="submit"  onclick="return validar()">
      </form>
      </body>
      </html>
       
       
      EXERCÍCIO
      Criar um formulário simples em html com um único campo CPF;
      Fazer uma validação em javascript antes de fazer o post;
      Consumir o WS https://bi.vidaclass.com.br/utils para consultar informações do CPF enviado pelo form;
      Do retorno obtido exibir na tela:
      Nome, email, telefone
      Se tem compra em saude: Sim | Não
      Quantas compras: (5) ex.
      Se tem farma: Sim | Não
      Se tem dependente: Sim | Não
      Qtd. de dependentes: (2) ex.

      Obtem o token para consumir os endpoints;
      https://bi.vidaclass.com.br/auth
      {
          "company_id": 1,
          "username": "webmaster@vidaclass.com.br",
          "password": "Teste20170705"
      }
      Endpoint para consultar o CPF
      https://bi.vidaclass.com.br/utils
      {
          "action": 4,
          "key": {
              "cpf": 25383193820
          }
      }
    • By iagomonteiro
      Estou criando um jogo de cartas em web, o jogo é bem estilo HS, e estou tendo problemas para adicionar condições de movimentação no drag and drop. Como vocês podem ver eu tenho uma variável mana, e a movimentação das cartas só seria possível de acordo com ela, porém quando adiciono as condições o D&D acaba nem se movimentando mais, pensei em chamar cada função do d&d dentro de uma condição, mas também não funcionou, alguém pode ajudar?
       
      JS
      // Jogador 1
      const fillplace1 = document.querySelector('#fillplace1');
      const fillplace2 = document.querySelector('#fillplace2');
      const fillplace3 = document.querySelector('#fillplace3');
      var fill;
      const empties = document.querySelectorAll('.empty');
      fillplace1.addEventListener('dragstart', enterstart);
      fillplace2.addEventListener('dragstart', enterstart);
      fillplace3.addEventListener('dragstart', enterstart);
      for (const empty of empties) {
          empty.addEventListener('dragover', dragOver);
          empty.addEventListener('dragenter', dragEnter);
          empty.addEventListener('dragleave', dragLeave);
          empty.addEventListener('drop', dragDrop);
      }
      function enterstart(){
          fill = this;
      }
      function dragOver(e) {
          e.preventDefault();
      }
      function dragEnter(e) {
          e.preventDefault();
          this.className += ' hovered';
      }
      function dragLeave() {
          this.className = 'empty';
      }
      function dragDrop(id) {
          this.className = 'empty';
          this.append(fill);
      }
       
      HTML
      <link rel="stylesheet" href="../css/jogar.css" />
       
      <div id="barraGeneral">
          <img src="../imagens/Campo/barraGeneralalfa.png" id="imggeneral" />
      </div>
       
      <div id="persona">
          <img src="../imagens/Personagem/cucapersonagem.png" id="imgpersonagem" />
      </div>
       
      <button id="btpassar" onclick="cont();">Passar Rodada</button>

      <H1 id="campomana">1</H1>
       
      <!-- Mesa das cartas jogador 1-->
      <div class="empty" id="emptyplace1">
      </div>
      <div class="empty" id="emptyplace2">
      </div>
      <div class="empty" id="emptyplace3">
      </div>
      <div class="empty" id="emptyplace4">
      </div>
      <div class="empty" id="emptyplace5">
      </div>
       
      <!-- Mão do jogador 1 -->
      <div class="emptyhand1">
          <div class="fill" draggable="true" id="fillplace1">
              <img src='../imagens/Sorteio/aa.png' draggable='true'>
          </div>
      </div>
       
      <div class="emptyhand2">
          <div class="fill" draggable="true" id="fillplace2">
              <img src='../imagens/Sorteio/aa2.png' draggable='true'>
          </div>
      </div>
       
      <div class="emptyhand3">
          <div class="fill" draggable="true" id="fillplace3">
              <img src='../imagens/Sorteio/aa2.png' draggable='true'>
          </div>
      </div>
       
    • By Anderson Maciel
      Boa tarde pessoal,

      Estou quebrando a cabeça para resolver um problema, tenho uma div dinâmica que carrega uma <table> em uma das colunas deveria apresentar o componente Switchery, esta <table> é montada a partir de uma função PHP que faz o select em uma tabela do banco de dados conforme abaixo:
       
      echo '<table class="table table-hover"> <thead> <tr> <th>Nome</th> <th>Agrupamento</th> <th>Ativo</th> </tr> </thead> <tbody>'; foreach($data as $row) { If ($row['ativo'] == 1) {$vativochk = "checked";} else {$vativochk = "";} echo '<tr> <td>'.$row['nome'].'</td> <td>'.$row['agrupamento'].'</td> <td><input type="checkbox" name="ativo_grid" class="js-switch" '.$vativochk.' disabled="disabled"></td> </tr>'; } echo ' </tbody> </table>'; Aqui está o Ajax que chama e retorna atualizando a DIV:
      //funcoes do grid dos graficos function atualiza_grid_graficos() { $.ajax({ type: "POST", url: "hubfuncind.php", data: { id_tabindicadores_paineis: $('#id_tabindicadores_paineis').val(), acao: "gridgraficos" }, success: function(data) { $('#conteudo').html(data); } }); } O retorno vem certinho, mas apenas o componente Switchery está vindo desconfigurado, ou seja vem um checkbox normal (html).

      O que é mais incrível é que neste mesmo formulário mais acima tenho este mesmo componente funcionando normalmente, somente dentro da DIV dinâmica é que fica desconfigurado conforme imagem anexa.

      Será que alguém já passou por isso?

    • By Dallas20
      Então pessoal,  estou fazendo um pequeno projeto para me aperfeiçoar em javascript e acabei me deparando com o seguinte problema. Eu queria pegar o valor de um input quando o usuário desse um click em um botão e isso foi simples de fazer, porém ao utilizar conceitos de POO e aplicando classes no javascript não consigo fazer essa ação. Gostaria de saber se isso é possível? E como fazer?
       
      Segue o code HTML:
      <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta name="author" content="Dallas"> <meta http-equiv="refresh" content="1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="../CSS/withdrawal.css" rel="stylesheet"> <script src="../javascript/withdrawal.js"></script> <title>Banco do Brasil</title> </head> <body> <h1>Quanto deseja sacar ?</h1> <input type="number" id="cashInReal"> <button type="button" onclick="alter()"> AQUI</button> </body> </html> code javascript:
      class withdrawal { alter() { alert(document.getElementById('cashInReal').value); } } Desde já muito obrigado.
       
      Att. Dallas
    • By vinihhylian0103
      Olá, Boa Noite.
      Estou usando o Iframe pra exibir meu form de login na minha página central, porém, quando eu clico no botão login, o profile parece somente no iframe, teria como eu fazer o profile ser redirecionado  na página principal.
       
      Segue o código:
        <div class="modal fade" id="modalLRFormDemo2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">     <div class="modal-dialog cascading-modal" role="document">       <!--Content-->       <div class="modal-content">                            <iframe marginwidth="50" height="500px" width="500px" src="CADASTROS_LOGINS\LOGIN\index.html"> Seu navegador não suporta frames )= </iframe>                 <center><button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Fechar</button></center>                 <br>               </div>             </div>             <!--/.Panel 8-->           </div>         </div>       </div>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.