Frage zu Boostrap Modal

[Kahmoon]

Servus beisammen,

ich würde gerne auf einer Seite ein Modal Window mittels Bootstrap einbauen. Hierfür gibt es eine einfache Codevorlage.

Allerdings ist das Overlay auf meiner Seite dann über allem und verdeckt sogar das Modal. Somit kann man das Modal nicht mehr schließen. Beisst sich das mit mm_menu Overlay??

Hat jemand ne Idee warum das so ist?

VG Franky

[derRenner]

hast du einen link zu deiner Seite? - die zweite Verlinkung ist leider die gleiche wie die erste

[Kahmoon]

Uuuuups. Ist korrigiert. Danke

Mit ist aufgefallen das dieser Modal-Hintergrund auch über der Contao Vorschauleiste liegt.

[derRenner]

da spielt dir mobile-menu mit rein

<a class="mm-wrapper__blocker mm-blocker mm-slideout" id="mm-0" aria-label="Close menu" inert="true" href="#mm-20"></a>

:where(.mm-slideout){
    position:relative;
    z-index:1;
    width:100%;
    -webkit-transition-duration:.4s;
    -o-transition-duration:.4s;
    transition-duration:.4s;
    -webkit-transition-timing-function:ease;
    -o-transition-timing-function:ease;
    transition-timing-function:ease;
    -webkit-transition-property:width,-webkit-transform;
    transition-property:width,-webkit-transform;
    -o-transition-property:width,transform;
    transition-property:width,transform;
    transition-property:width,transform,-webkit-transform
}

z-index: 1;
entfernst du das, dann wird auch dein Modal sichtbar und anklickbar. Wahrscheinlich musst du hier entsprechend nachbessern

[Bennie]

Es beißt sich anscheinend mit Deinem mmenu.
Da musst Du mal nach dem z-index schauen
Irgendwo in Deinem CSS gibt es :where(.mm-slideout) wenn ich dort den z-index raus nehme klappt es.

Ups derRenner war schneller - passend zum Namen

[Kahmoon]

Aber geht dann das Menü noch?

Nein, wenn ich das z-index dort rausnehme...stimmt fas ausgeklappte Menü nicht mehr.

[derRenner]

chcke mal

.mm-slideout {z-index: unset!important}

[Kahmoon]

Leider auch nicht. Das schiebt das Menü hinter die Header Leiste

[derRenner]

hab grad noch ein !important dazu gesetzt

.mm-slideout {z-index: unset!important}

[Bennie]

Ich habe das mmenu nicht oft im Einsatz, aber woher kommt das div vor dem wrapper? Bei mir werden die Klassen mm-page mm-slideout direkt an den wrapper "gehängt".

[Kahmoon]

Ich habe da nichts Besonderes eingestellt beim mm_menu. Glaube das ist normal!?

hab grad noch ein !important dazu gesetzt

.mm-slideout {z-index: unset!important}

Ändert leider nichts


Im Notfall löse ich es über Tooltips.

[derRenner]

ich sehe in den dev-tools aber keinen Eintrag von dir dazu
versuch's mal "zu Fuss", dann wirst du erkennen, dass das klappt.

Oder versuch ober du über body.modal-open .... { z-index: unset!important } ans Ziel kommst

body.modal-open .mm-slideout {
  z-index: unset !important;
}

[Kahmoon]

Hab es in den Dev Tools gemacht. Nicht fix im CSS

Edit:

body.modal-open .mm-slideout {
  z-index: unset !important;
}

Damit scheint es zu gehen!