Bootstrap im iFrame: Modaler Dialog wird am oberen Ende angezeigt

Modale Dialoge werden in Bootstrap immer am oberen Rand des Fensters angezeigt. Dies kann zu Problemen bei Iframes führen.

Modale Bootstrap-Dialoge werden immer am oberen Rand des Fensters angezeigt. Dies kann zu Problemen führen, wenn die Bootstrap Datei in einem Iframe angezeigt wird. In diesem Fall wird der Dialog am oberen Rand des Iframes angezeigt. Ist der Iframe länger bedeutet dies, dass es nicht mehr im sichtbaren Bereich angezeigt wird.

Der folgende Code schafft Abhilfe (benötigt Jquery):

<script></script>
$('#id_modal').on('show.bs.modal', function (e) {
  if (window.top.document.querySelector('iframe')) {
      $('#id_modal').css('top', window.top.scrollY); //set modal position
  }
});
</script>

Im Falle eines Iframes wird die Position des Dialogs verändert und im sichtbaren Bereich dargestellt.

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht.