Banner wegklickbar

emp · 16.11.2022

Hallo an alle,

ich würde gern ein Banner gestalten, ein einfaches DIV, das ich mit Inhalten (hauptsächlich Text, ein kurzer Satz, Hintergrundfarbe) fülle. Allerdings soll am rechten oberen Eck ein X sein, mit dem man das gesamte DIV wegklicken kann. Letzteres lässt sich wohl am einfachsten mit jQuery realisieren. Das X würde ich über FontAwesome einbinden.
So weit, so gut.
Allerdings weiß ich nicht ganz, wie ich das anstellen soll, das mit dem X und dem Wegklicken und so. Ich hab schon nach Templates von CSS Bannern gesucht, aber nichts Brauchbares (ganz einfach und ohne viel Firlefanz) gefunden.
Ich erwarte mir hier jetzt keinen Code, aber ich hätte gern ein paar Anstupser, wo ich solche Codeschnipsel finde, die ich mir da zusammenbauen kann.

Danke!

LG
emp

basti1012 · 16.11.2022

Erstmal solltest du JQuery wegschmeißen, das brauch man nicht mehr.
Der Rest ist dann einfach.
Das X kommt in den Modal rein.
Das modal hat zb <div id="modal"><div id="x">x</div> INHALT</div> den HTML Code.

Jetzt machst du ein clickevent auf den x
https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event
und dann blendest du das modal aus.
Zb erstmal mit display none und den style Attribute
https://www.w3schools.com/jsref/prop_style_display.asp

Wenn du das hinbekommen hast, kannst du das style Attribute auch weglassen und mit Klassen Arbeiten
https://www.w3schools.com/howto/howto_js_add_class.asp
https://www.w3schools.com/howto/howto_js_remove_class.asp

Was ich eigentlich besser finde, als das style Attribute zu nutzen. Aber zum Testen ist das m,al ganz gut

emp · 17.11.2022

Danke, muss ich mir genauer ansehen. Das clickevent dürfte JavaScript sein, oder? Wieso dann nicht jQuery? Ich war eigentlich der Meinung, jQuery kann vieles von JS, aber mit einfacherem Code.

Sempervivum · 17.11.2022

Ja, das Clickevent ist Javascript.

Wieso dann nicht jQuery? Ich war eigentlich der Meinung, jQuery kann vieles von JS, aber mit einfacherem Code.

Das trifft insofern zu als der Code mit jQuery kürzer ist, nicht unbedingt einfacher. Heute wo es Editoren mit Autovervollständigung gibt, hat dieser Vorteil nur noch eine geringe Bedeutung.
jQuery wurde aber auch noch aus anderen Gründen entwickelt:

Viele Funktionen, wie das closest, gab es in Vanilla-Javascript nicht und sie mussten mühsam von Hand programmiert werden.
Die Syntax von Javascript unterschied sich teilweise stark von Browser zu Browser und es war mühsam, das alles unter einen Hut zu bringen.

Inzwischen hat Vanilla-Javascript jedoch aufgeholt und beides ist nicht mehr der Fall. Daher ist jQuery heute überflüssig.

emp · 17.11.2022

Auch interessant, danke!

emp · 07.12.2022

Nachdem ich nun weiß, dass so ein gutes Ding Modal heißt, habe ich festgestellt, dass es mittlerweile ein dialog-Element in HTML gibt.
Das hier finde ich eigentlich recht sympathisch: https://kulturbanause.de/blog/html-dialog-element/
Nur würde ich gern das Modal beim Aufruf der Seite und nicht durch einen Click-Event öffnen - und zwar mit der showModal()-Methode.

Ich habe zwar das hier gefunden bei Werner Zenk, weiß aber nicht recht, wie ich das kombinieren kann.

Code:

<script>
setTimeout(function() {
 window.location.href="#openModal";

}, 2500); // Verzögerung in Millisekunden
</script>

Sempervivum · 07.12.2022

Da müsste dir diese Aussage in dem Artikel von kulturbanause helfen:

Dem <dialog>-Tag muss im HTML also zusätzlich das Attribut open gegeben werden, damit der Dialog sichtbar wird.

Also einfach das Attribut open geben, dann müsste das Dialogfenster sofort offen sein, ohne Javascript.

emp · 07.12.2022

Das hatte ich zwar, aber es war nicht wie ein Modal mitten in der Seite als Overlay, sondern zwischen dem Fließtext an der Stelle, wo ich es eingebaut habe mit show() und ganz oben links mit showModal().

Ich hab auch versucht, genau dieses hier http://lena91567.bplaced.net/modal-pop-up/ in meine Seite einzubauen. Allerdings funktioniert das nicht. Ich weiß nicht, was es da blockiert, ich hab ja sonst auch noch JS und Bootstrap zB eingebaut. Wenn ich es nämlich in eine neue Test-HTML einbau, dann funktioniert's sehr wohl. Mir wäre die Variante von Kulturbanause aber trotzdem lieber, einfach weil ich's moderner, schlichter und logischer find.

Also wenn ich diese beiden Buttons für die beiden Methoden einbaue, dann sehe ich, dass - wenn ich manuell open hinzufüge - standardmäßig die show()-Methode verwendet wird. Und nicht showModal().

Außerdem schreibt Kulturbanause "Es ist kein CSS, abseits des browsereigenen Stylesheets, im Einsatz, der das Aussehen oder die Position des Dialogs beeinflusst.". Daher sollte meines eigentlich gleich aussehen, tut es aber nicht. Das Aussehen muss ich sowieso stylen, aber die Position sollte eigentlich vom Dialog-Element gesteuert werden.
geht sogar! Ist das denn überhaupt korrekt...

setTimeout(function() {
document.getElementById("dialog").showModal();
}, 2500); // Verzögerung in Millisekunden

emp · 07.12.2022

Wie hat denn diese Lena das geschafft, den Text in diesem Modal vertikal zu zentrieren? Ich seh da nichts Spezielles und ich krieg's einfach nicht hin. Wenn ich display:table nehme, lässt sich das Modal nicht mehr wegklicken (die Verdunkelung geht weg, der Browser meint quasi, es sei geschlossen, es bleibt aber da).

Der Hintergrund ist mit einem Overlay geblurred. Allerdings schließt sich bei mir das Overlay nicht, da ich das via JS noch nicht anspreche. Da ich das ja nicht wie Lena sondern wie Kulturbanause gelöst hab, müsste man das Overlay jetzt noch gleichzeitig mit dem Click auf das X schließen. Aber wie?

<div id="modal-overlay"></div>

document.getElementById("close-modal").addEventListener("click", () => {
document.getElementById("modal").close();
});

Sempervivum · 08.12.2022

Wie hat denn diese Lena das geschafft, den Text in diesem Modal vertikal zu zentrieren?

Bei Lenas Modal bringt das Padding von 6rem die Zentrierung.
Früher war die vertikale Zentrierung mit CSS nicht einfach aber heute ist es dank Flexlayout sehr simpel:

Code:

.modal {
    display: flex;
    align-items: center;
    justify-content: center;
}

Für das andere Problem fehlt mir im Moment die Zeit.

Sempervivum · 08.12.2022

müsste man das Overlay jetzt noch gleichzeitig mit dem Click auf das X schließen. Aber wie?

Indem man auf das X einen Eventlistener registriert und darin das Modal schließt:

Code:

<dialog>
        <h1>Test Dialog-Tag</h1>
        <span id="close-modal">X</span>
    </dialog>
    <script>
        const modal = document.querySelector('dialog');
        modal.showModal();
        document.querySelector('#close-modal').addEventListener('click', event => {
            modal.close();
        });
    </script>

emp · 08.12.2022

Achja, display:flex hatte ich ausprobiert, da ließ sich dann das X nicht mehr rechts ausrichten. Ich Dodel habs aber danach absolut positioniert und das in Kombination mit display:flex funktioniert dann natürlich schon. Nur lässt sich das Modal dann wieder nicht mehr schließen wir vorhin bei display:table. Hilft hier also leider nicht.
6rem hat Lena wohl nicht umsonst eingestellt. Wenn das Modal keine Höhe hat (ich hab ja 40% gewählt), dann oben und unten genug Abstand, dann passt's automatisch. Aber richtig zentrieren lässt sich das wohl nicht, da das Modal sonst nach dem Schließen über JS per CSS trotzdem angezeigt wird. Dazu müsste man sonst über JS eine extra Klasse mit display:none; hinzufügen. Ist aber in dem Fall jetzt nicht nötig.

Ähm...das X schließt ja das Modal. Ich red vom Overlay, das bleibt dann übrig.
Ich hätte jetzt versucht, dem Overlay und dem Dialog die Klasse (nicht ID) modal zu geben und dann per JS sie per ClassName anzusteuern. Da kommt allerdings gar nichts mehr...versteh ich nicht.

Ich hab aktuell folgendes:

HTML:

<div id="modal-overlay"></div>
<dialog id="modal">
    <button id="close-modal"><i class="fas fa-times"></i></button><br>
    <p>Cookies gibt's bei uns nur dienstags beim Clubabend!<br>
    Du bist herzlich eingeladen vorbeizuschauen!</p>
    <br>
</dialog>

Javascript:

    //////// BEGIN OF MODAL
setTimeout(function() {
    document.getElementById("modal").showModal();

}, 1000); // Verzögerung in Millisekunden

document.getElementById("close-modal").addEventListener("click", () => {
    document.getElementById("modal").close();
});
    //////// END OF MODAL

CSS:

#modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 40%;
 
    background-color:#51AF2E;
    padding:0;
    border-radius:0px;
    border:none;
    z-index: 20;
    overflow-y:hidden;
}

#modal button {
    background: none;
    border: none;
    position:absolute;
    top:var(--nf-padding);
    right:var(--nf-padding);
}

.fa-times {
    font-size:2rem;
    color:white;
    }

.fa-times:hover {
    color:#AE0009;
}

#modal p {
    font-family:'Museo Slab 500', 'Times', serif;
    color:#FFFFFF;
    font-size:2rem;
    line-height:1.3;
    padding:var(--nf-padding);
    hyphens: none;
}

#modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 19;
  }

Sempervivum · 08.12.2022

Bei mir verschwindet beim Schließen auch das Overlay. Allerdings habe ich in meiner Testdatei kein benutzerdefiniertes Overlay verwendet sondern der Browser hat es erzeugt. Höchstwahrscheinlich ist das der Grund?

Ich werde mal untersuchen ob dieses Overlay auch stylen kann.

emp · 08.12.2022

Ja, das ist schon der Grund. Mein DIV-Overlay sollte per JS einfach durch denselben Klick aufs x auch geschlossen werden.
Das Standard-Overlay von showModal() wurde bei mir schon auch geschlossen.

Sempervivum · 08.12.2022

OK, das Overlay vom dialog-Element findet man als Pseudoelement ::backdrop und es lässt sich problemlos stylen: Wenn ich die Opacity auf 0.5 erhöhe, wird die Seite dunkler. Damit sehe ich keinen Grund mehr, ein eigenes zu verwenden.

emp · 08.12.2022

Das hab ich bei Kulturbanause auch gelesen, aber mir wird das im Insepktor nicht angezeigt, nicht mal über den Filter.
Ich versuchs mal in meine CSS einzugeben.

Sempervivum · 08.12.2022

Ich benutze Opera, Chrome dürfte sich ähnlich verhalten. Vielleicht unterstützt das noch nicht jeder Browser in den Entwicklerwerkzeugen.

emp · 08.12.2022

Also eingegeben hab ich's, ist nun gleich gestyled wie das Overlay vorher. Das klappt!
Doch, Firefox sollte das auch unterstützen. Das Backdrop macht er ja und stylen lässt es sich auch. Versteh nur nicht, warum der Inspektor mir das vorenthält.
Danke jedenfalls!

Kannst du mir vl auch noch verraten, wenn ich mein Modal nicht zentriere, sondern unten haben will (bottom:0), warum er mir das Modal dann trotzdem oben links anklebt? Und selbst mit width:100% geht es nicht bis zum rechten Rand, obwohl kein Margin gesetzt ist. Das Overlay (DIV) ging ja auch komplett drüber.

Sempervivum · 08.12.2022

Zu der zweiten Frage finde ich auf Anhieb keine Lösung sondern bei mir verhält es sich genau so und reagiert nicht auf top oder bottom. transform funktioniert jedoch. Irgend wie muss der Browser das auf andere Weise positionieren.
Leider finde ich im Web nichts zu der Frage, nur zu selbst gestrickten Modals oder dem von Bootstrap.

emp · 08.12.2022

Ok, dann bin ich zumindest nicht ganz doof. Beruhigt ja schon mal. ;-)

Mit show() macht er das übrigens nicht, nur mit showModal().
Dann sind das tatsächlich Eigenheiten.