Miten luodaan: Luo ponnahdusikkuna

Opi, miten luot ponnahdusikkunavälimuodon CSS:n avulla (Callout Message).

Ponnahdusikkuna

Ponnahdusikkunat sijaitsevat yleensä sivun pohjassa ja ne käytetään ilmoittamaan käyttäjille erityisistä asioista: vinkit/työkalut, alennukset, toimenpiteet, jotka on otettava huomioon jne.

Kokeile itse

Luo ponnahdusikkuna

Vaihe 1 - Lisää HTML:

<div class="callout">
  <div class="callout-header">Callout Header</div>
  <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
  <div class="callout-container">
    <p>Jotain tekstiä...</p>
  </div>
</div>

Jos haluat poistaa ponnahdusikkunavälimuodon sulkemistoiminnon, lisää <span> elementti, ja aseta sille onclick ominaisuus, joka ilmaisee "kun klikkaat minua, piilottaa isäntävälimuodon", eli konteinin <div class="callout">.

Vinkki:Käytä HTML-entiteettiä "&:times;" Luo kirjain "x"。

Vaihe 2 - Lisää CSS:

Asetetaan ponnahdusikkunavälimuodon ja sulkemispainikkeen tyylit:

/* ponnahdusikkunavälimuoto - kiinnitetty sivun pohjaan */
.callout {
  position: fixed;
  alas: 35px;
  oikea: 20px;
  vasen: 20px;
  max-leveys: 300px;
{}
/* ponnahdusikkunavälimuodon otsikko */
.callout-header {
  padding: 25px 15px;
  taustaväri: #555;
  font-size: 30px;
  väri: valkoinen;
{}
/* ponnahdusikkunavälimuoto/yleinen */
.callout-container {
  padding: 15px;
  taustaväri: #ccc;
  väri: musta
{}
/* sulkemispainike */
.closebtn {
  position: absolute;
  ylä: 5px;
  oikea: 15px;
  väri: valkoinen;
  font-size: 30px;
  kursori: sormi;
{}
/* hiiren osoitettuna muutetaan väri */
.closebtn:hover {
  väri: kevytvalkoinen;
{}

Kokeile itse

Liittyvät sivut

Oppitunti:Miten luoda varoitusviesti

Oppitunti:Miten luoda muistiinpano