Display alert made in html and css by javascript

Question

Display alert made in html and css by javascript

Navigation

#1 by (3 votes)
#2 by (0 votes)

1

Good morning, I'm creating a form in html and javascript for validation, my idea is to create a successful alert or crash with html and css (cute and etc), but I do not know how I can "call" give a require on that alert that I created, help me? Thanks!

<!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>

javascript html css

asked by anonymous 12.03.2015 / 14:43

2 answers

Array / Lua table for JavaScript Change according to page

score 3 · Answer 1

The functionality you are looking for is a modal / dialog.

You find this in jQuery: link , or in other libraries.

Basically it's a div that you can customize with HTML and CSS that you only display when necessary. Often you also place another div below to serve as an overlay to prevent clicks on the page other than in the dialog window (dialog / modal).

I suggest you use an already made one like jQuery. A simple idea in native JavaScript / CSS would be:

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

to display the dialog.

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

to close.

CSS (quick suggestion):

#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;
}

Example: link

score 0 · Answer 2

I did something like this, but it did not seem to me to be 'right', even because the div occupied space.

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

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

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

   }