Content Overlay – Content Blocking Demo

Das Content-Overlay-Pattern zeigt einen Platzhalter anstelle des eigentlichen Inhalts. Erst nach Consent wird der Platzhalter durch den echten Inhalt ersetzt. Dies ist die visuelle Alternative zum Formular-Blocking.

Live Status

Live Demo: Content Overlay

Implementierung

<!-- Blockiert (Standard sichtbar) -->
<div class="demo-consent-blocked">
  <h4>Inhalt blockiert</h4>
  <button data-cc="c-settings">Einstellungen</button>
</div>

<!-- Freigegeben (Standard versteckt) -->
<div class="demo-consent-granted" style="display:none">
  <!-- Dein eigentlicher Inhalt -->
</div>

<!-- Service opt_in_code: -->
document.querySelectorAll(".demo-consent-granted")
  .forEach(el => el.style.display = "block");
document.querySelectorAll(".demo-consent-blocked")
  .forEach(el => el.style.display = "none");