Javascript Modal Leeftijdscheck

Verkoop je spullen die niet zo geschikt zijn voor jongeren (drank bijvoorbeeld) dan is het handig om bij het starten van de website een leeftijdscheck te doen met een zogenaamde 'Modal'. Onderstaande code gaat zelfs nog een stapje verder en haalt bepaalde stukken tekst uit je webpagina die je niet wilt laten zien, en andere stukken tekst laat het gewoon staan (bijvoorbeeld een stuk tekst over de historie van je bierbrouwerij).

Natuurlijk is zo'n leeftijdscheck flauwekul want je kan gewoon op ja drukken, maar het is in bepaalde branches verplicht om zoiets op je website hebben. Onderstaande Modal is in gebruik in de echte wereld en werkt voorbeeldig.

Index

Het verdient aanbeveling om dit stukje aan de bovenkant van de webpagina te zetten dus direct na de <body> tag.

<!-- Leeftijdscheck-->
<div id="age_modal" class="modal">
   <div class="modal-content">
      <div class="modal-container">
         <p>Welkom. Bier is een genotsmiddel voor volwassenen, bent u achttien jaar of ouder?</p>
         <div class="clearfix">
            <button class="yes-btn" onclick="yes()">JA ik ben achttien jaar of ouder.</button>
            <button class="no-btn" onclick="no()">Nee ik ben jonger dan achttien jaar.</button>
         </div>
      </div>
   </div>
</div>

Plaats deze Javascript onderaan de pagina, net voor de </body> tag.

<script>
   //**ACTIVEER DE MODAL
   document.getElementById('age_modal').style.display='block';
   //** BIJ JA, HAAL DE MODAL WEG
   function yes() {
      document.getElementById('age_modal').style.display='none';
      }
   //** BIJ NEE, VERVANG DE TEKST IN DE WEBCONTANT VIA DE ID
   function no() {
      //Haal hier eerste even de modal weg
      document.getElementById('age_modal').style.display='none';
      //De tekst die getoond wordt in de gedeeltes niet voor jonge oogjes geschikt
      var tekst="<p>Deze informatie mag niet worden getoond in verband met uw leeftijd.</p>";
      //Er worden hier twee secties in de webpagina vervangen via de id tag
      document.getElementById("welke_bieren_content").innerHTML = tekst;
      document.getElementById("verkooppunten_content").innerHTML = tekst;
      }
</script>
/* Buttons */
.yes-btn, .no-btn {
/* Onderstaande twee regels alleen van toepassing bij buttons naast elkaar 
  float: left; 
  max-width:50%;     */
  width: 50%;
  background-color: #e2b14a;
  color: #2e180a;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

.modal-container {
  padding: 16px;
  text-align: center;
}

.modal {
  display: none; /* Standaard is de modal verborgen*/
  position: fixed; /* Hij moet op zijn plek blijven op het scherm */
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; /* Vervang dit door scroll indien nodig */
  padding-top: 20px;
  background: #2e180a;
  z-index: 10003; /* Altijd bovenop andere webpagina-tekst */
}

/* Modal Content/Box */
.modal-content {
  margin: 5% auto 15% auto; /* 5% vanaf bovenaan, 15% vanaf de onderkant en gecentreerd */
  border: 1px solid #e2b14a;
  width: 50%; 
}

/* Fix het beginnen van iets nieuws op de volgende regel */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* Hier wordt de Modal wat kleiner bij een groot scherm, dit oogt mooier */
@media screen and (max-width: 1180px) {
  .modal-content {
     width: 80%;
  }