Keskustelu: Nettisivujen teko: HTML/JS alert ilman kuittausta

Jälleen newbie-kysymys, mutta miten koodaisitte alertin (alert(viesti)) tilalle alertin, joka ei vaadi kuittausta, vaan viestin näytettyään sulkeutuu hetken kuluttua itsekseen?

Ajatus, että viesti tulisi statusbaariin johonkin kenttään, on tässä kohden poissuljettu, koska siellä ei ole tilaa.

Kivoja esimerkkejä on minusta esim. koulujen Wilmassa (on kyllä php, meillä html ja js) ja lisäksi olen saanut vinkkejä katsoa facebookin messuja, mutta enpä osaa sieltäkään apinoida.

Javascriptillä varmaankin tarkoitit?

setTimeout("alert('3 sekkaa!')",3000)

Tuo kylläkin toimii niin päin, että se odottaa 3 sekkaa ennen kuin näyttää alertin, joka edelleen vaatii sen kuittauksen.

Tee ensin viestilaatikko HTML:llä. Jatkon kannalta helpointa on käyttää valmiiksi formatoitua tekstiä (CSS: white-space: pre). Laita laatikko oletuksena piiloon (display: none) ja jollain CSS-luokalla (.visible) näkyviin. JS:n puolella on sitten helppo päivittää sisältö (div.firstChild.nodeValue = teksti) ja näyttää laatikko (div.className = "visible").

<div id="alert">(tekstisolmu)</div>

#alert {
  position: fixed;
  top: 30%;
  left: 30%;
  width: 40%;
  z-index: 10;
  white-space: pre;

  background-color: white;
  color: black;
  padding: 1em;
  border: 2px solid black;

  display: none;
}
#alert.visible {
  display: block;
}

function alert_esiin(teksti, aika) {
  var div = document.getElementById("alert");
  div.className += " visible";
  div.firstChild.nodeValue = teksti;
  if (aika) {
    setTimeout(alert_pois, aika);
  }
}
function alert_pois() {
  var div = document.getElementById("alert");
  div.className = div.className.replace(/\s*\bvisible\b/g, '');
}
window.onload = function() {
  alert_esiin("Hei!\nMonen rivin viesti!\n\nJee!", 5000);
};

Kiitos! Tämä oikein hyvä (samanlaista olen yrittänyt, mutta nyt ohje oli selvä).

Yksi lisäkysymys vielä tähän liittyen:

Minulla on div nyt bodyn alussa. Kun näytän viestin, niin div tavallaa aukenee ruudun yläosaan ja koko muu sivu valuu alaspäin. Kun viesti häipyy, niin sivu palaa ylös. Tämä voisi jossain tapauksessa olla cool, mutta nyt haluaisin viestin muun sivun päälle kutakuinkin keskelle näyttöä.

Luulen, että sen saisi CSS-tyyleillä, mutta niissäkin olen newbie enkä esim. hoovereiden tyyleistä osaa päätellä, mikä niissä saa sen viestin tulemaan päälle eikä omaan tilaan. Osaisiko joku vielä neuvoa?

Katsopa esimerkkiäni. Siinä ei ole kovin monta tyyliä, ja laatikko aukeaa vakiokokoisena suhteellisen keskelle ruutua. (Vanhoilla IE:n versioilla position: fixed ei toimi oikein, joten jos on tarvis tukea niitäkin, täytyy hieman kikkailla.)

Olen kopioinut koodin suoraan tyyleineen kaikkineen ja testaan IE 8:lla ( ja vain IE 6:een asti pitää toimia).

Eli tässä on ehkä jotain, joka johtuu käyttämästämmee kehittimestä (lisää omia tagejaan ja laskee prosentteja väärästä componentista - tai ole ehkä sijoittanut sittenkin väärään paikkaan). Selvitänpä sitä. Kiitos!