View html and css alert by javascript

Question

View html and css alert by javascript

Asked 9 years, 3 months ago

Viewed 7,718 times

2

Good Morning, I am creating a form in html and javascript for validation, my idea is to create a success or failure alert with html and css (cute and etc), but I do not know how to "call" give a require in this alert I created, can anyone help me? Thank you!

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

You can use jQuery?

– Felipe Avelar

2015/03/12 at 13:44
you have an example of code so I can understand the idea?

– Thiago Freitas

2015/03/12 at 13:45
jQuery is a javascript library that already has a lot of stuff ready. In this case, to make a modal/dialog, as you wish, just use jQuery-UI and customize the box as you wish... That’s why I asked if you can use jQuery.

– Felipe Avelar

2015/03/12 at 13:47
Explain how you want to display this message. If it is by a text on the page, by a modal dialog, an Alert, etc.

– Randrade

2015/03/12 at 13:49
I wanted my alert of this 'display' in the div where the form is being filled, to warn if something is missing etc.. those very generic that we see in most Formulars

– Thiago Freitas

2015/03/12 at 13:57
Ah, you can create two Divs, one for the error message and one for the success message.. hence both leaves with "display:None". Then just use a style.display = 'block' in the desired div.

– Ricardo

2015/03/12 at 14:05

Show 1 more comment

2 answers

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.

by Sergio • **133,294** points · Answer 1 · 2015-03-12T14:41:09+00:00

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

You’ll find it in jQuery: http://jqueryui.com/dialog/, or in other libraries.

Basically is a div that you can customize with HTML and CSS that you show only when necessary. It is often also put another div, underneath, to serve as overlay to prevent clicks on the page other than the Alert window(dialog/modal).

I suggest using an already done 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: http://jsfiddle.net/of3paudy/6/

by Thiago Freitas • 95 points · Answer 2 · 2015-03-12T14:18:27+00:00

I did something like that, but it didn’t seem very 'right', because the div occupied the space.

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

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

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

   }