View html and css alert by javascript

Asked

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>

javascript html css

  • You can use jQuery?

  • you have an example of code so I can understand the idea?

  • 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.

  • Explain how you want to display this message. If it is by a text on the page, by a modal dialog, an Alert, etc.

  • 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

  • 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.

Show 1 more comment

2 answers

3

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/

  • It was not quite what I wanted, but it helped me a lot in the concept of the idea, thank you!

  • @Thiagofreitas better explain what you wanted? Did you see the link I suggested (with jQuery)? -> http://jqueryui.com/dialog/

  • this thing of including all the Divs on the page and applying the display with javascript to enable by the demand, theoretically forces the user to load everything without having requested or I am wrong?

  • @Thiagofreitas has to load 2 empty Ivs. This is irrelevant in terms of performance. The content adds later, before showing.

  • I looked at the site, it is a lot of thing, incredibly useful, look please this link, imagine that I was going to use these alerts http://bootsnipp.com/snippets/featured/new-style-alerts, it would be many Divs to do this swap of Divs to effect the alert, really does not affect the performace?

  • I actually feel like it wouldn’t be the right way to do it

  • @Thiagofreitas this link is the same as my answer only with CSS from Boostrap. I think you know little, I suggest you use the jQuery dialog.

Show 2 more comments

0

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

   }

Browser other questions tagged javascript html css

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