contao-modal-bundle und Contao 4.13: Hilfe beim Einrichten

[doescher]

Hallo zusammen,

ich habe gerade eine Website von Conto 3.5. auf Contao 4.13 umgestellt und kämpfe mich durch (arbeite immer nur sporadisch mit Contao und im Webdesign).

Ich möchte gerne ein PopUp für das Eintragen in einen Newsletter einbinden und wollte die Erweiterung EuF_overlay dazu verwenden, allerdings wird mir diese im Manager als »verwaist« angezeigt und sie wird wohl auch nicht mehr unterstützt. Als Alternative wird xirdion/contao-modal-bundle empfohlen.
Leider sind für mich die Angaben im GitHub nicht wirklich hilfreich, ich bekomme auf der Website nichts angezeigt, egal ob es es als Modul im Seitenlayout einbinde oder als Inhaltselement.
Allerdings wird offensichtlich eine Ebene angelegt die es verhindert, dass ich z.B. die Navigation benutzen kann.
Aber leider wird weder ein Bild noch Text angezeigt.

Gibt es irgendwo eine etwas genauere Beschreibung der Funktion als bei GitHub, die ich mir angucken könnte?

Danke und viele Grüße
doescher

[zoglo]

Mir ist keine weitere Quelle bekannt. Die README auf GitHub scheint für mich auch schlüssig zu sein.

Allerdings wird offensichtlich eine Ebene angelegt die es verhindert, dass ich z.B. die Navigation benutzen kann.
Aber leider wird weder ein Bild noch Text angezeigt.

Das klingt für mich, als ob das Modal funktioniert und du eventuell Styles oder JavaScript hast, welches reingrätscht. (Eventuell alte Styles / JavaScript / Konsolenfehler)

https://github.com/Xirdion/contao-mo...s#L65C1-L65C15
^ Laut CSS sollte das Modal funktionieren.

Gibt es einen Link zur Seite?

[doescher]

Mir ist keine weitere Quelle bekannt. Die README auf GitHub scheint für mich auch schlüssig zu sein.



Das klingt für mich, als ob das Modal funktioniert und du eventuell Styles oder JavaScript hast, welches reingrätscht. (Eventuell alte Styles / JavaScript / Konsolenfehler)

https://github.com/Xirdion/contao-mo...s#L65C1-L65C15
^ Laut CSS sollte das Modal funktionieren.

Mmmh, ich habe die Bootstrap-Erweiterung eingebunden. Könnte hier der Fehler liegen?

Gibt es einen Link zur Seite?

Leider nein, die ist noch nicht live...

[zoglo]

Mmmh, ich habe die Bootstrap-Erweiterung eingebunden. Könnte hier der Fehler liegen?


Leider nein, die ist noch nicht live...

Das kann ich dir nicht beantworten, möglich ist es.

Eigeninitiative angesagt:

Nehme das Inspection-Tool aus der der Developer-Konsole und schaue, was über der Navigation liegt (Es scheint, als wenn das Modal ja offen aber unsichtbar ist).

Kontrolliere das CSS dieses Elementes und achte auch auf die Keyframe-Animationen

Kontrolliere zusätzlich, ob es zu JavaScript-Fehlern in der Konsole kommt

[doescher]

Das kann ich dir nicht beantworten, möglich ist es.

Eigeninitiative angesagt:

Nehme das Inspection-Tool aus der der Developer-Konsole und schaue, was über der Navigation liegt (Es scheint, als wenn das Modal ja offen aber unsichtbar ist).

Kontrolliere das CSS dieses Elementes und achte auch auf die Keyframe-Animationen

Kontrolliere zusätzlich, ob es zu JavaScript-Fehlern in der Konsole kommt

Leider bin ich damit überfordert, ich kann mit der Developer-Version von Firefox mein CSS korrigieren und noch das eine oder andere, aber das oben übersteigt leider meine Fähigkeiten...
Ist den das EuF_overlay unter 4.13 noch installierbar?

[mlweb]

Das kannst Du ganz einfach selbst ausprobieren, ggf. in einer Testinstallation.

Ab ich würde eine Erweiterung die nicht mehr geflegt wird eher nicht einsetzen. Vor allem dann nicht, wenn es offensichtlich Ersatz gibt und Du ohnehin gerade bei einem Update bist und alles auf einen aktuellen Stand bringen willst .

[stefan-at-work]

Modul von Xirdion funzt eigentlich einwandfrei. Habe folgende Konstellation als Modal (Inhaltselement) für eine Urlaubsanzeige:
Inhaltstyp: Text + Bild
Öffnungstyp: Zeit
Start bei: 1

Welche Einstellungen sind bei Dir gesetzt?

[doescher]

Ab ich würde eine Erweiterung die nicht mehr geflegt wird eher nicht einsetzen. Vor allem dann nicht, wenn es offensichtlich Ersatz gibt und Du ohnehin gerade bei einem Update bist und alles auf einen aktuellen Stand bringen willst .

Du hast natürlich recht, aber ich befürchte, dass sich die Bootstrap-Erweiterung mit dem Modal-Bundle ins Gehege kommt. Die Einstellungen von Bootstrap habe ich mühsam so hinbekommen, dass die Site gut aussieht. Jetzt alles eventuell wieder aufschnüren ist für mich ein Graus...

[doescher]

Welche Einstellungen sind bei Dir gesetzt?

Sind bei mir identisch, das Erscheinen nach 5 Sekunden funktioniert auch, was ich daran erkenne, dass erst nach fünf Sekunden nichts mehr an der Navigation geklickt werden kann .

[mlweb]

Poste einen Link zu Seite.

[zoglo]

Poste einen Link zu Seite.

Wurde schon erwähnt: https://community.contao.org/de/show...l=1#post577617

Seite ist noch nicht live - Daher wird es auch schwierig zu helfen

[mlweb]

Ich habe einen privaten Link zur Seite bekommen.
Du hast für das Modal u.a. folgendes CSS

.modal {
position: fixed;
top:0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
overflow: hidden;
outline: 0;

}

Wenn Du das display: none; entfernst, siehst Du schon mal Dein Fenster und kannst es auch schliessen.
Wenn Du dann noch möchtest, dass die Navigation sichtbar (nicht abgedunkelt) und bedienbar bleibt, müsstest Du das Modal verkleinern und ensprechend positionieren.
Aber ich denke letzteres ist gar nicht das Ziel.

[zoglo]

Habe auch die PN bekommen - Die .modal Klasse aus Bootstrap kollidiert.

Wenn du die .modal aus Bootstrap nicht entfernen kannst, führe folgendes aus:

Gehe in Contao unter Templates und erstelle dir das Template modal.html5 aus dem Bundle.

In diesem Template ersetzt du in Zeile 12:

<dialog id="modal-<?= $this->modalId ?>" class="<?= $this->modalClass ?> hide js-modal" <?= $this->attributes ?>>

mit

<dialog id="modal-<?= $this->modalId ?>" class="modal-no-bootstrap hide js-modal" <?= $this->attributes ?>>

Du erstellst dir zusätzlich eine CSS-Datei... und bindest diese im Seitenlayout aus mit folgendem Inhalt:

.modal-no-bootstrap {
    color: var(--modal-font-color);
    border: none;
    background: transparent;
}

.modal-no-bootstrap.visible .modal-overlay {
    animation: modalFadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.modal-no-bootstrap.visible .modal-container {
    animation: modalSlideIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.modal-no-bootstrap.hide .modal-overlay {
    animation: modalFadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.modal-no-bootstrap.hide .modal-container {
    animation: modalSlideOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.modal-no-bootstrap.visible .modal-overlay {
    display: flex;
}

.modal-no-bootstrap.hide .modal-overlay {
    display: none;
}

Erklärung
- Bootstrap verwendet die .modal Klasse anders als die Extension
- Die Extension setzt die .modal Klasse über den Builder
- Wir ersetzen also .modal mit .modal-no-bootstrap und ergänzen das fehlende CSS

[zoglo]

Ich habe einen privaten Link zur Seite bekommen.
Du hast für das Modal u.a. folgendes CSS

.modal {
position: fixed;
top:0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
overflow: hidden;
outline: 0;

}

Wenn Du das display: none; entfernst, siehst Du schon mal Dein Fenster und kannst es auch schliessen.
Wenn Du dann noch möchtest, dass die Navigation sichtbar (nicht abgedunkelt) und bedienbar bleibt, müsstest Du das Modal verkleinern und ensprechend positionieren.
Aber ich denke letzteres ist gar nicht das Ziel.

Macht auch Sinn, Boostrap wird aber weiterhin mit den Styles kollidieren, auch kann es nicht kontrolliert werden, da Bootstrap über das CDN nachgeladen wird.
Meine Lösung würde die Logik so abändern, dass die Klassen nicht kollidieren.

Übrigens nutzt du noch Bootstrap 4.3.1, die letzte 4er Version ist 4.6.2 (https://getbootstrap.com/docs/4.6/ge.../introduction/)
Auch gibt es schon Bootstrap 5.3, ist deutlich moderner <3 (https://getbootstrap.com/docs/5.3/ge.../introduction/)

[doescher]

Macht auch Sinn, Boostrap wird aber weiterhin mit den Styles kollidieren, auch kann es nicht kontrolliert werden, da Bootstrap über das CDN nachgeladen wird.
Meine Lösung würde die Logik so abändern, dass die Klassen nicht kollidieren.

Übrigens nutzt du noch Bootstrap 4.3.1, die letzte 4er Version ist 4.6.2 (https://getbootstrap.com/docs/4.6/ge.../introduction/)
Auch gibt es schon Bootstrap 5.3, ist deutlich moderner <3 (https://getbootstrap.com/docs/5.3/ge.../introduction/)

Ich habe mit dem Umbau der Site schon vor fast 2 Jahren mit der damals aktuellen Bootstrap-Version begonnen. Nun wird der Umbau aber akut, da contao 3.5 nicht mehr mit PHP8 läuft. Allerdings habe ich nun die Befürchtung, dass ich quasi von vorne beginne, wenn ich eine neuere oder gar die neueste Version von Bootstrap nehme...

Leider funktioniert aber Deine Lösung nicht, es wird nichts angezeigt. Bei modal

display:block;

hat es geklappt.
Was mache ich nun?

[zoglo]

Siehe https://community.contao.org/de/show...l=1#post577640

[zoglo]

Nutze folgendes in deinem Template modal.htm5

https://gist.github.com/zoglo/c8759b...50128189ddd904

Kannst das Custom css auch rausschmeißen, ich schreibe es mit diesem Template sofort in den <head> rein.
Laut Code gab es noch andere Klassen, welche gesetzt werden mussten, damit das JavaScript funktioniert.

modal.html5

<?php 
    if ($this->modalClass)
    {
        $GLOBALS['TL_HEAD'][] = '<style>.modal-nobs{color:var(--modal-font-color);border:none;background:transparent}.modal-nobs.visible .modal-overlay{animation:.3s cubic-bezier(0,0,.2,1) modalFadeIn;display:flex}.modal-nobs.visible .modal-container{animation:.3s cubic-bezier(0,0,.2,1) modalSlideIn}.modal-nobs.hide .modal-overlay{animation:.3s cubic-bezier(0,0,.2,1) modalFadeOut;display:none}.modal-nobs.hide .modal-container{animation:.3s cubic-bezier(0,0,.2,1) modalSlideOut}</style>';
        
        $this->modalClass = str_replace('modal ', 'modal-nobs ', $this->modalClass);
    }
    
    $this->extend('block_unsearchable'); 
?>

<?php $this->block('headline'); ?>
<?php $this->endblock(); ?>

<?php $this->block('content'); ?>

<?php if ($this->showModal): ?>
    <?php if ($this->modalButton): ?>
        <button id="modal-button-<?= $this->modalId ?>" class="js-modal-open modal-opener" data-modal="modal-<?= $this->modalId ?>"><?= $this->modalButton ?></button>
    <?php endif; ?>
    <dialog id="modal-<?= $this->modalId ?>" class="<?= $this->modalClass ?> hide js-modal" <?= $this->attributes ?>>
        <div class="modal-overlay">
            <div class="modal-container">
                <button class="close modal-close js-modal-close" data-modal="modal-<?= $this->modalId ?>"></button>
                <div class="inside">
                    <div id="<?= $this->contentId ?>" class="<?= $this->contentClass ?> modal-content">
                        <?php if ($this->headline): ?>
                        <<?= $this->hl ?> id="<?= $this->headlineId ?>" class="headline"><?= $this->headline ?></<?= $this->hl ?>>
                        <?php endif; ?>
                        <?php if ($this->html): ?>
                            <?= $this->html ?>
                        <?php endif; ?>
                        <?php if ($this->addImage): ?>
                            <?php $this->insert('image', $this->imageData); ?>
                        <?php endif; ?>
                        <?php if ($this->text): ?>
                            <?= $this->text ?>
                        <?php endif; ?>
                        <?php if ($this->url): ?>
                            <a class="hyperlink_txt" href="<?= $this->url ?>" title="<?= $this->titleText ?>"<?php if ($this->target): ?> target="_blank" rel="noopener"<?php endif; ?>>
                                <?= $this->linkTitle ?>
                            </a>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    </dialog>
<?php endif; ?>

<?php $this->endblock(); ?>

[doescher]

Ja, zoglo, das funktioniert jetzt einwandfrei.
Vielen Dank für Deine Mühen!
Es ist immer wieder toll, welchen Support man hier im Forum erhält!

[zoglo]

Meines Erachtens ein Issue, habe es also für die Nachwelt auch in GitHub (mit dem gist) gepostet:

https://github.com/Xirdion/contao-modal-bundle/issues/8