Hoe te maken: Maak een pop-up bericht

Leer hoe je een pop-up bericht (Callout Message) kunt maken met CSS.

Pop-up berichten

Pop-up berichten bevinden zich meestal aan de onderkant van de pagina en worden gebruikt om gebruikers op de hoogte te stellen van speciale zaken: tips/trucs, kortingen, acties die moeten worden ondernomen, enz.

Try it yourself

Maak een pop-up bericht

Eerste stap - Voeg HTML toe:

<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>Enkele tekst...</p>
  </div>
</div>

Als je de functie om de pop-up berichten te sluiten wilt toevoegen, voeg dan een <span> element, en stel een onclick eigenschap, die betekent "wanneer ik wordt aangeklikt, verberg mijn ouder-element", dat is de container <div class="callout">.

Tip:Gebruik de HTML entiteit "&:times;"Maak het letter X".

Tweede stap - Voeg CSS toe:

Stel stijlen in voor het pop-up berichtenvak en sluitknop:

/* Pop-up berichtenvak - gevestigd aan de onderkant van de pagina */
.callout {
  positie: vast;
  onder: 35px;
  rechts: 20px;
  links: 20px;
  max-breedte: 300px;
{}
/* Pop-up berichtenkop */
.callout-header {
  inleg: 25px 15px;
  achtergrond: #555;
  font-grootte: 30px;
  kleur: wit;
{}
/* Pop-up berichtencontainer/hoofdinhoud */
.callout-container {
  inleg: 15px;
  achtergrondkleur: #ccc;
  kleur: zwart
{}
/* Sluitknop */
.closebtn {
  positie: absoluut;
  boven: 5px;
  rechts: 15px;
  kleur: wit;
  font-grootte: 30px;
  cursor: pointer;
{}
/* Muis over de knop plaatsen en kleur wijzigen */
.closebtn:hover {
  kleur: lichte grijs;
{}

Try it yourself

Related pages

Tutorial:How to create a warning message

Tutorial:How to create a sticky note