Ergebnis 1 bis 19 von 19

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

  1. #1
    Contao-Fan
    Registriert seit
    05.11.2012.
    Beiträge
    400

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

    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

  2. #2
    Contao-Fan
    Registriert seit
    24.02.2021.
    Beiträge
    984
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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?

  3. #3
    Contao-Fan
    Registriert seit
    05.11.2012.
    Beiträge
    400

    Standard

    Zitat Zitat von zoglo Beitrag anzeigen
    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?

    Zitat Zitat von zoglo Beitrag anzeigen
    Gibt es einen Link zur Seite?
    Leider nein, die ist noch nicht live...

  4. #4
    Contao-Fan
    Registriert seit
    24.02.2021.
    Beiträge
    984
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von doescher Beitrag anzeigen
    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

  5. #5
    Contao-Fan
    Registriert seit
    05.11.2012.
    Beiträge
    400

    Standard

    Zitat Zitat von zoglo Beitrag anzeigen
    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?

  6. #6
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    7.080
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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 .
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  7. #7
    Community-Moderator Avatar von stefan-at-work
    Registriert seit
    05.06.2009.
    Ort
    Bad Segeberg
    Beiträge
    1.782
    Partner-ID
    634

    Standard

    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?

  8. #8
    Contao-Fan
    Registriert seit
    05.11.2012.
    Beiträge
    400

    Standard

    Zitat Zitat von mlweb Beitrag anzeigen
    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...

  9. #9
    Contao-Fan
    Registriert seit
    05.11.2012.
    Beiträge
    400

    Standard

    Zitat Zitat von stefan-at-work Beitrag anzeigen
    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 .

  10. #10
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    7.080
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Poste einen Link zu Seite.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  11. #11
    Contao-Fan
    Registriert seit
    24.02.2021.
    Beiträge
    984
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von mlweb Beitrag anzeigen
    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

  12. #12
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    7.080
    Contao-Projekt unterstützen

    Support Contao

    Standard

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

    Code:
    .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.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  13. #13
    Contao-Fan
    Registriert seit
    24.02.2021.
    Beiträge
    984
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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:
    PHP-Code:
    <dialog id="modal-<?= $this->modalId ?>" class="<?= $this->modalClass ?> hide js-modal" <?= $this->attributes ?>>
    mit
    PHP-Code:
    <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:
    HTML-Code:
    .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
    Geändert von zoglo (10.11.2023 um 19:16 Uhr) Grund: .modal-dialog ist von bootstrap reserviert also nutzen wir modal-no-bootstrap

  14. #14
    Contao-Fan
    Registriert seit
    24.02.2021.
    Beiträge
    984
    Contao-Projekt unterstützen

    Support Contao

    Standard

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

    Code:
    .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/)

  15. #15
    Contao-Fan
    Registriert seit
    05.11.2012.
    Beiträge
    400

    Standard

    Zitat Zitat von zoglo Beitrag anzeigen
    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
    Code:
    display:block;
    hat es geklappt.
    Was mache ich nun?

  16. #16
    Contao-Fan
    Registriert seit
    24.02.2021.
    Beiträge
    984
    Contao-Projekt unterstützen

    Support Contao
    Geändert von zoglo (10.11.2023 um 20:15 Uhr) Grund: Fertiges Template im Post

  17. #17
    Contao-Fan
    Registriert seit
    24.02.2021.
    Beiträge
    984
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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-Code:
    <?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(); ?>

  18. #18
    Contao-Fan
    Registriert seit
    05.11.2012.
    Beiträge
    400

    Standard

    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!

  19. #19
    Contao-Fan
    Registriert seit
    24.02.2021.
    Beiträge
    984
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •