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 s3c0
      Olá pessoal,
       
      peguei um exemplo de um menu suspenso que utiliza somente CSS, porém não estou conseguindo adaptar para a minha aplicação.
       
      Segue abaixo:
       
      * { box-sizing: border-box; } body { margin: 0; } /*Configurações Padrões*/ ul.menu, .menu li, .menu a{ margin:0; padding:0; list-style:none; text-decoration:none; width:100%; } ul.menu ul{ position:absolute; display:none;} /* Configurações nivel 1*/ ul.menu{ float:left; font-family:Verdana, Geneva, sans-serif; font-size:15px; padding:0 5px;} .menu li{ float:left; width:auto; position:relative;} .menu li a{ display:block; padding:0 20px; line-height:45px; height:45px; float:left; width:240px; transition:all 0.1s linear; } /* Configurações nivel 2*/ .menu li:hover > ul.submenu-1{ display:block; top:45px; left:0; padding:0px; width:250px; } .menu ul.submenu-1 a{ padding:0 20px; width:250px; } /* Configurações nivel 2*/ .menu li:hover > ul.submenu-2{ display:block; top:0; padding:0px; width:250px; left:240px; } .menu ul.submenu-2 a{ width:250px; padding:0 20px; } /* Configurações nivel 3*/ .menu li:hover > ul.submenu-3{ display:block; top:0; padding:0px; width:250px; left:240px; } .menu ul.submenu-3 a{ width:250px; padding:0 20px; } .column1 { float: left; width: 250px; padding: 10px; min-height: 250px; } .column1 a { float: none; color: black; padding: 16px; text-decoration: none; display: block; text-align: left; } .column1 a:hover { } .column4 { float: right; width: 300px; padding: 10px; min-height: 250px; position:relative; top:0px; } .column4 a { float: none; color: black; padding: 16px; text-decoration: none; display: block; text-align: left; } .column4 a:hover { } .row:after { content: ""; display: table; clear: both; } /*Configurações de cores*/ /*nivel 1*/ .menu{background:#CCC; } .menu a{ color:#000; } .menu li:hover > a{ color:#000; } /*nivel 2*/ .submenu-1{} .submenu-1 a{color:#000;} .submenu-1 li:hover > a{ color:#000; } /*nivel 3*/ .submenu-2{ } .submenu-2 a{color:#000;}; .submenu-2 li:hover > a{ color:#000; } /*nivel 3*/ .submenu-3{ } .submenu-3 a{color:#000;} .submenu-3 li:hover > a{ color:#000; }  
      <ul class="menu"> <!-- Esse é o 1 nivel ou o nivel principal --> <li><a href="#">Categorias <i class="fa fa-caret-down"></i></a> <ul class="submenu-1"> <!-- Esse é o 2 nivel ou o primeiro Drop Down --> <li><a href="#">Departamento 1 <i class="fa fa-caret-right"></i></a> <ul class="submenu-2"> <!-- Esse é o 3 nivel ou o Segundo Drop Down --> <li><a href="#">Categoria 1</a></li> <li><a href="#">Categoria 11</a></li> <li><a href="#">Categoria 111 <i class="fa fa-caret-right"></i></a> <ul class="submenu-3"> <!-- Esse é o 4 nivel ou o Terceiro Drop Down --> <li><a href="#">Subcategoria 1</a></li> <li><a href="#">Subcategoria 11</a></li> <li><a href="#">Subcategoria 111</a></li> </ul> </li> </ul> </li> <li><a href="#">Departamento 2 <i class="fa fa-caret-right"></i></a> <ul class="submenu-2"> <!-- Esse é o 3 nivel ou o Segundo Drop Down --> <li><a href="#">Categoria 1</a></li> <li><a href="#">Categoria 11</a></li> <li><a href="#">Categoria 111 <i class="fa fa-caret-right"></i></a> <ul class="submenu-3"> <!-- Esse é o 4 nivel ou o Terceiro Drop Down --> <li><a href="#">Subcategoria 1</a></li> <li><a href="#">Subcategoria 11</a></li> <li><a href="#">Subcategoria 111</a></li> </ul> </li> </ul> </li> </ul> </li> </ul>  
      A primeira imagem é o resultado e a segunda imagem, seria o que estou querendo fazer.
       
      Alguém consegue me explicar o que está de errado?
       
      Agradeço a atenção de todos!


    • By Ewerton Hugo
      Boa noite, estou tentando fazer um site, que mostre a hora no momento que é acessado, juntamente com uma imagem que represente os periodos do dia, manhã
      , tarde e noite.Porém não consigo fazer com que o código em java script funcione alguém pode me ajudar (sou iniciante)?
       
       
       
    • By huntressDc
      Estou com uma atividade de aula para fazer e gostaria de uma ajuda, devo receber do usuário o valor da compra e o valor pago, e então exibir o troco. Até aí ok, só que também pede para exibir numa textarea as notas utilizadas no troco, informando sempre o mínimo de notas possíveis, exemplo:
       
       
      vlrCompra = 53,00 vlrPago = 100,00 vlrTroco = 47,00 notasTroco = 4 notas de 10,00 1 nota de 5,00 2 notas de 1,00  
      Não sei como fazer essa última parte, alguém para me ajudar? AS NOTAS QUE EU TENHO DISPONIVEIS SAO 1, 5, 10, 50
      Eis o que fiz até agora:
       
      function calculaTroco(){          var valorCompra = parseFloat($("#valorCompra").val());     var valorPago = parseFloat($("#valorPago").val());     var valorTroco = 0;          if (validarCampos() && validarNan()){         if (valorPago == valorCompra){             valorTroco = 0;             $("#valorTroco").val(valorTroco);             alert("Não gerou troco");                      }else if(valorPago > valorCompra){                          valorTroco = valorPago - valorCompra;             $("#valorTroco").val(valorTroco);                      }else{             alert("Não gerou troco (Valor pago menor que valor da compra)");         }         notasUtilizadas();         $("#valorCompra").val("");         $("#valorPago").val("");         $("#valorCompra").focus();     } } validarCampos() e validarNan() são apenas funções de tratamento. A função notasUtilizadas() seria a função que não estou conseguindo fazer... Devo utilizar array, if, for nessa atividade.
       
      Se alguém puder me ajudar, me dar umas dicas, agradeço muito!
       
      Parte do HTML:
      <!DOCTYPE html>
      <html lang="pt-BR">
          <head>
              <meta charset="utf-8"/>
              <title>Calcular Troco</title>
              <script type="text/javascript" src="jquery.js"></script>
              <style type="text/css">
                  fieldset { width:250px; }
                  label { display:block; float:left; } 
                  label, input, textarea, select { width:150px; margin: 5px 0; }
                  th, td { border:1px solid #ccc; font-size:0.9em; }
              </style>
          </head>
          <body>
              
              <form id="formulario">
                  <fieldset>
                      <legend>Calcular Troco</legend>
                      
                      <label for="valorCompra" >Valor da compra:</label>
                      <input type="text" id="valorCompra" name="valorCompra" /><br />
                      
                      <label for="valorPago" >Valor pago:</label>
                      <input type="text" id="valorPago" name="valorPago" /><br /><br />
                      
                      <button type="button" id="button" onclick="calculaTroco()">Calcular troco</button><br /><br />
                      
                      <label for="valorTroco" >Valor do troco:</label>
                      <input type="text" id="valorTroco" name="valorTroco" readonly="readonly"/><br /><br />    
                      
                      <label for="notasUtilizadas">Notas utilizadas:</label>
                      <textarea rows="3" id="notasUtilizadas" readonly="readonly" ></textarea><br/>
                      
                  </fieldset>
              </form>
          <script type="text/javascript" src="troco.js"></script>
          </body>
      </html>
    • By Vinicius Bazan
      Estou tendo um problema em elaborar o meu código com javascript, estou fazendo um teste em html e css simples pra depois elaborar um website, o objetivo aqui é fazer um relógio pelo JS e ter um contador em baixo desse relógio que vai pegar valores a partir de um switch para esse contador funcionar, isso porque se trata de dados sobre tipos de agressões contra as mulheres, então os cases do switch tem o dado em segundos para executar a formula, uma mensagem inicial e uma mensagem final.
       O usuário teria dois botões, um de cada lado (nesse caso estou usando 2 div com as ID's #btd e #bte, ao apertar esses botões aumentaria o valor de uma variável em +1 ou -1 e isso faria o switch escolher outro case e trocar os dados do contador, mas os dados não são trocados, mantendo as informações iniciais.
       Ao todo tem 4 funções, a função relogio(), contador(), btd() e bte(), sendo que a btd e bte estão dentro da contador() 
       Estou colocando o codigo dentro do spoiler, se alguém puder me ajudar a achar alguma solução agradeço
       
      OBS: Eu nem sei se pode ter uma function dentro da outra, mas como estou aprendendo JS ainda, imagino que assim como outras estruturas (If, Else, Switch, etc...) possa ser possível colocar uma função dentro da outra.
       
       
    • By digonaweb
      Bom dia!
       
      Alguém pode me ajudar com esse script abaixo?
       
      Preciso fazer com que o link abra em uma nova janela, pois fica abrindo em um quadrado onde está fisicamente o relógio no site.
       
      <!-- clock widget start -->
       
      <script type="text/javascript">
           var css_file=document.createElement("link");
           css_file.setAttribute("rel","stylesheet");
           css_file.setAttribute("type","text/css");
           css_file.setAttribute("href","//s.bookcdn.com//css/cl/bw-cl-150x70.css");
           document.getElementsByTagName("head")[0].appendChild(css_file);
      </script>
       
      <div id="tw_1_737904741"><div style="width:150px; height:70px; margin: 0 auto;">
      <a href="https://booked.net/time/rio-de-janeiro-18486">Rio de Janeiro</a>
      <br/></div></div>
       
      <script type="text/javascript"> function setWidgetData_737904741(data){ if(typeof(data) != 'undefined' && data.results.length > 0) { for(var i = 0; i < data.results.length; ++i) { var objMainBlock = ''; var params = data.results; objMainBlock = document.getElementById('tw_'+params.widget_type+'_'+params.widget_id); if(objMainBlock !== null) objMainBlock.innerHTML = params.html_code; } } } var clock_timer_737904741 = -1; </script> <script type="text/javascript" charset="UTF-8" src="https://widgets.booked.net/time/info?ver=2&domid=209&type=1&id=737904741&scode=124&city_id=18486&wlangid=1&mode=1&details=0&background=ece0bf&color=4c4d57&add_background=ffffff&add_color=2071c9&head_color=ffffff&border=1&transparent=1"></script>
       
      <!-- clock widget end -->
       
       

       
       

×

Important Information

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