Contao-Camp 2024
Ergebnis 1 bis 6 von 6

Thema: .tl_submit_container im Simple Modal Fenster ansprechen

  1. #1
    Contao-Fan Avatar von Nightwing
    Registriert seit
    29.05.2013.
    Beiträge
    436

    Standard .tl_submit_container im Simple Modal Fenster ansprechen

    Hallo,

    wie spreche ich (im Backend) den Speichern Button im Simple Modal Fenster direkt an, denn ausserhalb vom Simple Modal Fenster hat er dieselbe CSS Klasse?!?
    Mehr im Screenshot, ein Bild sagt mehr, ...
    Danke für Input!

    ToM
    Angehängte Grafiken Angehängte Grafiken

  2. #2
    Contao-Fan Avatar von fusch
    Registriert seit
    25.03.2012.
    Ort
    München
    Beiträge
    498
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hallo Tom,

    wenn es nur um den Selektor geht, hat doch auch das Modal eine Klasse, oder?

    Code:
    .modalklasse .tl_submit_container
    Viele Grüße
    Hella
    Mitglied des Contao User Treffen München
    Aktuelle Termine erfährst Du immer unter www.contao-bayern.de
    Komm' doch mal vorbei!

  3. #3
    Contao-Fan Avatar von Nightwing
    Registriert seit
    29.05.2013.
    Beiträge
    436

    Standard

    Hallo Hella,

    schon, aber den Selektor frisst er edd: .simple-modal-body .tl_submit_container
    Hab mal n Screener vom Code...

    ToM
    Angehängte Grafiken Angehängte Grafiken

  4. #4
    Contao-Fan Avatar von fusch
    Registriert seit
    25.03.2012.
    Ort
    München
    Beiträge
    498
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ja, ok, weil es in einem iframe ist. Dann evtl. eine eigene Klasse über das Template mitgeben? Kann gerade nur raten, weil ich keine Installation vor mir habe.

    Grüße
    Hella
    Mitglied des Contao User Treffen München
    Aktuelle Termine erfährst Du immer unter www.contao-bayern.de
    Komm' doch mal vorbei!

  5. #5
    Contao-Fan Avatar von Nightwing
    Registriert seit
    29.05.2013.
    Beiträge
    436

    Standard

    Sprich, man kann ein iframe nicht adressieren, ohne etwas zu basteln (div drumrum)?

    ToM

  6. #6
    Contao-Fan Avatar von Nightwing
    Registriert seit
    29.05.2013.
    Beiträge
    436

    Standard

    Die Klasse heisst: .popup
    Es funktioniert auch, fast...
    Beim drüberhovern oder klickern verschwindet der Button, manchmal kommt er au wieder, manchmal edd...
    Drück ich F12 für Browsertools, isch er da.
    Screenshot und CSS:

    Code:
    /* ... Save buttons ... */
    .tl_formbody_submit .tl_submit_container {
        background-color: transparent;
        color: #444;
        position: fixed;
        display: inline-grid;
        justify-items: flex-start;
        /* WebKit */ -webkit-transition: color 1s ease-out;
        /* Firefox */ -moz-transition: color 1s ease-out;
        /* Opera */ -o-transition: color 1s ease-out;
        /* Standard */ transition: color 1s ease-out;
    }
    
    .tl_submit_container {
        position: fixed;
        left: 0;
        top: 3em;
    }
    
    .popup .tl_submit_container {
        display: block !important;
        left: 4.75em;
        top: 1em;
    }
    
    .tl_submit,
    .popup .tl_submit,
    .split-button ul .tl_submit,
    .popup .split-button ul .tl_submit,
    .tl_formbody_submit .tl_submit,
    .popup .tl_formbody_submit .tl_submit {
        color: #444;
        background-color: #DBDAEA !important;
        font-weight: bolder;
        /* WebKit */ -webkit-transition: color 1s ease-out;
        /* Firefox */ -moz-transition: color 1s ease-out;
        /* Opera */ -o-transition: color 1s ease-out;
        /* Standard */ transition: color 1s ease-out;
    }
    
    .tl_submit:hover,
    .popup .tl_submit:hover,
    .split-button ul .tl_submit:hover,
    .popup .split-button ul .tl_submit:hover,
    .tl_formbody_submit .tl_submit:hover,
    .popup .tl_formbody_submit .tl_submit:hover {
        color: #e14f4f;
        background-color: #DBDAEA !important;
        /* WebKit */ -webkit-transition: color 500ms ease-in-out;
        /* Firefox */ -moz-transition: color 500ms ease-in-out;
        /* Opera */ -o-transition: color 500ms ease-in-out;
        /* Standard */ transition: color 500ms ease-in-out;
    }
    
    .tl_submit:active,
    .popup .tl_submit:active,
    .split-button ul .tl_submit:active,
    .popup .split-button ul .tl_submit:active,
    .tl_formbody_submit .tl_submit:active,
    .popup .tl_formbody_submit .tl_submit:active {
        color: #e14f4f;
        background-color: #F0C584 !important;
        /* WebKit */ -webkit-transition: color 500ms ease-in-out;
        /* Firefox */ -moz-transition: color 500ms ease-in-out;
        /* Opera */ -o-transition: color 500ms ease-in-out;
        /* Standard */ transition: color 500ms ease-in-out;
    }
    
    .tl_submit_container button {
        box-sizing: border-box;
        min-width: 100px;
        font-weight: bolder;
    }
    
    .tl_submit_container #edit {
    /*    margin-right: 1px; */
    }
    
    .maintenance_inactive .tl_submit_container {
        position: inherit;
    }
    
    .two-factor .tl_submit_container {
        position: inherit;
    }
    
    .split-button {
        color: #444;
        display: inline-grid;
        justify-items: flex-start;
    }
    
    a.tl_submit {
        display:inline-block;
        font-weight:bolder;
    }
    
    .split-button ul {
        display: inline-grid;
        justify-items: flex-start;
    }
    
    .split-button ul:before,
    .split-button ul:after {
        display: none;
    }
    
    .split-button > button[type="button"] {
        color: #444;
        background-color: #DBDAEA;
        padding: 0;
        width: 29px;
        min-width: 0;
        border: 0 none;
        border-left: 1px solid #AAA;
        border-radius: 0;
        height: 28px;
        /* WebKit */ -webkit-transition: color 1s ease-out;
        /* Firefox */ -moz-transition: color 1s ease-out;
        /* Opera */ -o-transition: color 1s ease-out;
        /* Standard */ transition: color 1s ease-out;
    }
    
    .split-button > button[type="button"]:hover,
    .split-button > button[type="submit"]:hover {
        color: #e14f4f;
        /* WebKit */ -webkit-transition: color 500ms ease-in-out;
        /* Firefox */ -moz-transition: color 500ms ease-in-out;
        /* Opera */ -o-transition: color 500ms ease-in-out;
        /* Standard */ transition: color 500ms ease-in-out;
    }
    
    .split-button > button[type="button"]:active,
    .split-button > button[type="submit"]:active {
        color: #e14f4f;
        background-color: #F0C584;
        /* WebKit */ -webkit-transition: color 500ms ease-in-out;
        /* Firefox */ -moz-transition: color 500ms ease-in-out;
        /* Opera */ -o-transition: color 500ms ease-in-out;
        /* Standard */ transition: color 500ms ease-in-out;
    }
    
    .split-button button img {
        display: block;
        margin: 3px auto auto 7px;
        width: 12px;
        height: auto;
    }
    
    .simple-modal .simple-modal-footer a.btn,
    .simple-modal .simple-modal-footer a.btn primary {
        color: #444;
        background-color: #DBDAEA !important;
        font-weight: bolder;
        /* WebKit */ -webkit-transition: color 1s ease-out;
        /* Firefox */ -moz-transition: color 1s ease-out;
        /* Opera */ -o-transition: color 1s ease-out;
        /* Standard */ transition: color 1s ease-out;
    }
    
    .simple-modal .simple-modal-footer a.btn:hover,
    .simple-modal .simple-modal-footer a.btn primary:hover {
        color: #e14f4f;
        background-color: #DBDAEA !important;
        /* WebKit */ -webkit-transition: color 500ms ease-in-out;
        /* Firefox */ -moz-transition: color 500ms ease-in-out;
        /* Opera */ -o-transition: color 500ms ease-in-out;
        /* Standard */ transition: color 500ms ease-in-out;
    }
    
    .simple-modal .simple-modal-footer a.btn:active,
    .simple-modal .simple-modal-footer a.btn primary:active {
        color: #e14f4f;
        background-color: #F0C584 !important;
        /* WebKit */ -webkit-transition: color 500ms ease-in-out;
        /* Firefox */ -moz-transition: color 500ms ease-in-out;
        /* Opera */ -o-transition: color 500ms ease-in-out;
        /* Standard */ transition: color 500ms ease-in-out;
    }
    Woran könnte das noch liegen?
    Danke für den zündenden Hinweis!
    ToM
    Angehängte Grafiken Angehängte Grafiken
    Geändert von Nightwing (06.02.2020 um 15:11 Uhr)

Aktive Benutzer

Aktive Benutzer

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

Lesezeichen

Lesezeichen

Berechtigungen

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