2

Bom Dia, Estou criando um form em html e javascript para validação, minha ideia é criar um alerta de sucesso ou falha com html e css(bonitinho e etc), mas não sei como posso "chamar" dar um require nesse alerta que eu criei, alguém pode me ajudar? Obrigado!

<!DOCTYPE html>
<html>
<body>

<form id="form1" action="">
Nome: <input type="text" name="name" value="Nome"><br>
Sobrenome: <input type="text" name="sname" value="Sobrenome"><br><br>
</form> 
<button onclick="takeValue()">mostra valor</button>

<p id="teste"></p>

<script>
function takeValue() {
var x = document.getElementById("form1");
var texto = "";
var i;
for (i = 0; i < x.length ;i++) {
    texto += x.elements[i].value + "<br>";
}

document.getElementById("teste").innerHTML = texto;
if(texto == "Nome<br>Sobrenome<br>"){
alert("quero exibir alerta de SUCESSO feito com html e css");
}
else{
    alert("quero exibir alerta de ERRO feito com html e csss");
    }
}
</script>

6
  • Você pode usar jQuery? 12/03/2015 às 13:44
  • tu tem um exemplo de código para que eu possa entender a ideia? 12/03/2015 às 13:45
  • jQuery é uma biblioteca javascript que já tem muita coisa pronta. No caso, para fazer um modal/dialog, como você deseja, basta usar jQuery-UI e customizar a caixa como você desejar... Por isso perguntei se você pode utilizar jQuery. 12/03/2015 às 13:47
  • Explique a forma que você deseja mostrar essa mensagem. Se é por um texto na página, por um dialog modal, um alert, etc.
    – Randrade
    12/03/2015 às 13:49
  • queria que meu alerta desse 'display' na div onde está sendo preenchido o formulário, para avisar se falta algo etc.. aqueles bem genérico que vemos na maioria dos formularios 12/03/2015 às 13:57

2 Respostas 2

3

A funcionalidade que procuras é a de um modal/dialog.

Encontras isso no jQuery: http://jqueryui.com/dialog/, ou noutras bibliotecas.

Basicamente é uma div que podes customizar com HTML e CSS que mostras só quando necessário. Muitas vezes coloca-se também uma outra div, por baixo, a servir como overlay para impedir cliques na página senão na janela do alert(dialog/modal).

Sugiro usares um já feito como o do jQuery. Uma ideia simples em JavaScript/CSS nativo seria:

document.getElementById('dialogContent').innerHTML = infoText;
document.getElementById('overlay').style.display = 'block';

para mostrar o dialog.

function fechar() {
    document.getElementById('overlay').style.display = 'none';
}

para fechar.

CSS (sugestão rápida):

#overlay {
    display:none;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9000;
    vertical-align: middle;
}
#dialog {
    background-color: #ddf;
    position: relative;
    width: 300px;
    height: 100px;
    padding: 10px;
    margin: 0 auto;
    top: 20%;
    border: 1px solid black;
    z-index: 9001;
    border: 2px solid black;
    border-radius: 5px;
}
#fechar {
    position: absolute;
    bottom: 5px;
    right: 7px;
    cursor:pointer;
}

Exemplo: http://jsfiddle.net/of3paudy/6/

7
  • Não era bem oque eu queria, mas me ajudou bastante no conceito da ideia, obrigado! 12/03/2015 às 16:34
  • @ThiagoFreitas explica melhor o que querias? viste o link que sugeri (com jQuery)? -> jqueryui.com/dialog
    – Sergio
    12/03/2015 às 16:40
  • esse lance de incluir todas as divs na pagina e aplicar o display com javascript para ativar pela demanda, teoricamente obriga o usuário a carregar tudo sem ainda ter solicitado ou estou errado? 12/03/2015 às 17:47
  • @ThiagoFreitas tem de carregar 2 divs vazias. Isso é irrelevante em termos de performance. O conteudo adicionas depois, antes de mostrar.
    – Sergio
    12/03/2015 às 17:49
  • olhei o site, é bastante coisa, incrivelmente uteis, olha por favor esse link, imagina que eu fosse utilizar esses alertas bootsnipp.com/snippets/featured/new-style-alerts, seria muitas divs para fazer esse swap de divs para efetuar o alerta, realmente não afeta a performace? 12/03/2015 às 17:53
0

Fiz algo assim, mas não me pareceu muito 'correto', até porque a div ocupava o espaço.

   function display()
   {
   var elem = document.getElementById("teste");

   if(elem.style.visibility == "hidden"){
    elem.style.visibility="";

   } else {
    elem.style.visibility="hidden";
   }

   }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .