Blog

Ihr wollt responsive Overlays bauen und braucht eine gute Grundstruktur? Ich zeige euch heute wie ihr diese Grundstruktur schnell erstellt und sie auch bei größen Inhalt gut zu bedienen bleibt.

Was brauchen wir dafür?

Gar nicht viel! Ich benutze jQuery da es die meisten so wie so verwenden. Man kann das ganze aber auch mit VanillaJS einfach bauen. Zu dem ein bisschen HTML und CSS.

Damit wir bei größen Inhalten auch gut scrollen können nehmen wir einen Wrapper der sich mit position:fixed; über die komplette Seite legt. Darin ist das eigentliche Overlay. Wenn wir das Overlay jetzt öffnen setzen wir dem Body overflow:hidden; damit der User nicht mehr die eigentliche Seite scrollen kann sondern nur noch im Overlay selbst. Das ist gerade auf mobilen Geräten ungemein benutzerfreundlich.

<a data-ref="#meinOverlay" class="overlay-start">Klick mich!</a>
<div id="meinOverlay" class="overlay-wrapper">
  <div class="overlay-content">
    <a class="overlay-close">×</a>
    ... hier kommt der eigentliche Inhalt
  </div>
</div>

Dann brauchen wir noch das bisschen CSS:

.overlay-open {
  position: relative;
  overflow: hidden;
}
.overlay-open .overlay-wrapper {
  overflow-x: hidden;
  overflow-y: auto;
}
.overlay-wrapper {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  z-index: 10;
  background-color: rgba(0,0,0,0.7);
}
.overlay-content {
  position: relative;
  width: auto;
  margin: 10px;
  padding: 10px;
  background-color: #fff;
  border: 2px solid #333;
  border-radius: 3px;
}
.overlay-close {
  position: absolute;
  top: -5px;
  right: -5px;
  padding: 3px 9px;
  font-size: 28px;
  color: #000;
  cursor: pointer;
}
.overlay-close:hover {
  color: #000;
  text-decoration: none;
}
@media (min-width: 768px) {
  .overlay-content {
    width: 600px;
    margin: 30px auto;
  }
}

Und zum Schluss nur noch das benötigte Javascript:

$(document).ready(function() {
  $('.overlay-start').click(function() {
    var ref = $(this).data('ref');
    if ($(ref).length > 0) {
      $('body').addClass('overlay-open');
      $(ref).show();
    }
  });
  $('.overlay-close').click(function() {
    $(this).parents('.overlay-wrapper').hide();
  });
});

Beachtet bitte, dass das ganze wirklich nur ein Grundgerüst ist. Man kann es jetzt noch um einen FadeIn bzw. FadeOut Effekt erweitern, sowie optische Verbesserungen. So kann es aber jeder genau für sich anpassen.

Hier könnt ihr euch auch die Demo anschauen: Demo