Ein modales Fenster mit Javascript

In meinem vorherigen Blogpost habe ich bereits die Schwierigkeit zum Ausdruck gebracht, mit der ich als neuer Coder beim Lösen dieses Problems konfrontiert war. Hier zeige ich, wie ich es wirklich im Detail mit Hilfe von JavaScript geschafft habe (Dieses Modal wurde mit Hilfe von Foundation und jQuery erstellt).

Zu Beginn habe ich in meinem HTML Dokument einen einfachen Button erstellt, der das Modal durch Mausklick öffnen soll.

Im Anschluss habe ich das eigentliche Modal entworfen.

HTML:

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

<div class="modal-wrapper" id="modal-wrapper">
    <div class="modal" id="modal">
      	<button class="close-button" id="close-button"><h5&gt;✕&lt;/h5></button>
      	<div class="modal-guts">
            <div class="row details">
                <div class="column">
            	    <p>This is the modal</p>
          	</div>
            </div>
        </div>
    </div>
</div>

Wie du oben sehen kannst, habe ich einen close button mit dem X Unicode Charakter (✕) erstellt. Ich habe es so konstruiert, dass bei Klicken des open button mein Modal sich über die Website legt und bei Klicken des X das Modal geschlossen wird. Ich habe außerdem ein Overlay hinzugefügt, das den Hauptteil meiner Website verdunkelt, so dass das Modal mehr auffällt. Mit der Hilfe von CSS habe ich im Folgenden das Modal ein wenig hübscher aussehen lassen.

CSS:

body.modal-open {
    overflow: hidden;
}

.modal-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 200;
    padding: 60px;
    overflow-y: auto;
    display: none;
}

.modal {
    display: none;
    width: 600px;
    position: relative;
    margin: auto;
    background: #fff;
    box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9);
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    background: rgba(0, 0, 0, 0.6);
    display: none;
}

.modal-guts {
    padding: 35px;
    color: #1c1b1b;
}

.modal .close-button {
    position: absolute;
    z-index: 1;
    top: 15px;
    right: 15px;
    color: inherit;
    padding: 1px 11px 2px 12px;
    border-radius: 25px;
}

.modal .close-button h5 {
  margin: 0;
}

.modal .close-button:hover {
    background-color: #353336;
    color: #fff;
    transition: .2s;
    cursor: pointer;
}

.open-button {
    border: solid 1.5px #38e5c5;
    color: #38e5c5;
    padding: 15px 20px 10px 20px;
    margin-top: 60px;
}

.open-button:hover {
    background-color: #38e5c5;
    color: #fff;
    cursor: pointer;
    transition: .3s;
}

Hier habe ich die Schriftarten, Farben, Hover-Attribute und Abstände entwickelt. Es ist wichtig zu beachten, dass der Modal Wrapper mit der position: fixed zentriert ist und dass das Modal selbst display: none und position: relative hat. Dadurch kann das Modal innerhalb der Grenzen des modal Wrappers positioniert werden und bleibt unsichtbar, bis der Benutzer auf die Schaltfläche Öffnen klickt. Ich habe ebenfalls die Möglichkeit geschaffen, das Modal innerhalb des modal Wrappers zu scrollen, indem ich im property overflow-y: auto eingesetzt habe.

Als nächstes musste ich ein wenig jQuery in meine JavaScript-Datei einfügen, um die Click Events zu aktivieren.

JAVASCRIPT / JQUERY:

var closeButton = document.querySelector("#close-button");
var openButton = document.querySelector("#open-button");

closeButton.addEventListener("click", function() {
    $("#modal").hide();
    $("#modal").scrollTop();
    $("#modal-overlay").hide();
    $("#modal-wrapper").hide();
    $("body").removeClass("modal-open");
});

openButton.addEventListener("click", function() {
    $("#modal").show();
    $("#modal-overlay").show();
    $("#modal-wrapper").show();
    $("body").addClass("modal-open");
});

Ich habe damit begonnen, eine Variable für jeden Button des Modals zu erstellen. Dann habe ich zu diesen beiden Buttons einen Event Listener mit einer Klickfunktion hinzugefügt. Hier habe ich .show() und .hide() verwendet, um das Modal auftauchen und verschwinden zu lassen. Ich habe dem Schließen-Button eine .scrollTop() -Methode hinzugefügt, so dass das Modal immer oben im Fenster beginnt. Wie du sehen kannst, habe ich auch .addClass()/.removeClass() zum body hinzugefügt. Diese Class hat das Attribut overflow: hidden zum body hinzugefügt, das es dem Benutzer ermöglichte, nur auf dem Modal zu scrollen.

Wie ich bereits erwähnt habe, war das Modal bis zu diesem Punkt relativ einfach zu bauen, da ich bereits mit diesen jQuery-Methoden vertraut war. Nun stand ich vor der Herausforderung zu verstehen, welche Methode zu verwenden ist, damit sich mein Modal schließt, wenn der Benutzer außerhalb des Modals selbst klickt.

MORE JAVASCRIPT / JQUERY:

window.addEventListener(“mouseup”, function(event) {
    if (!$(event.target).closest(".modal,.open-button").length) {
        $("#modal").hide();
        $("#modal").scrollTop();
        $("#modal-overlay").hide();
        $("#modal-wrapper").hide();
        $("body").removeClass("modal-open");
    }
});

Nach langer Recherche und vielen Online-Tutorials kam ich zu diesem Ergebnis. Ich begann mit einem event listener, platziert auf dem Fenster, das eine mouseup funktion benutzte. Das bedeutet, dass die JavaScript-Datei jederzeit versteht, wenn der Benutzer einfach auf das Fenster klickt. Danach wusste ich, dass ich zwischen diesen Klicks unterscheiden musste. Ich musste herauszufinden, welche Klicks genau dann passierten, wenn das Modal offen war und welche Klicks außerhalb des Modals selbst lagen. Klingt verwirrend, oder?

Ich habe ein if -Statement verwendet, um der JavaScript-Datei auf logische Weise mitzuteilen, dass nur einige dieser Klicks für diese spezielle Funktion sinnvoll sind und andere nicht. Mein if-Statement besagt im Wesentlichen: „Wenn der registrierte Klick nicht vom Modal selbst, den Dingen innerhalb des Modals oder dem Schließen-Button auf dem Modal stammt, dann tue dies….“. Das ! vor der Funktion prüft, ob es NICHT von den aufgelisteten Parametern stammt. Die .closest() – Methode durchsucht die Elemente (in meinem Fall den Modal- und den Open-Button) und ihre Vorgänger, um aus den passenden Elementen ein neues Objekt zu erstellen. Dieses neue Objekt wird in Kombination mit der .length() – Methode verwendet, die es der Mouseup Funktion ermöglicht, zu unterscheiden, ob der Klick innerhalb oder außerhalb der gesamten „Länge“ des Modals stattfindet.

Zuletzt musste ich dem Modal sagen, was zu tun ist, wenn dieser Klick tatsächlich von außerhalb des Modals kommt. Dieser Teil war relativ einfach, da die Methoden, die in dem if-statement aufgeführt sind, die gleichen Methoden sind, die an den Close Button angebunden sind.

Und das war’s ! Einfach, oder? Wenn du visuell veranlagst bist wie ich und ein eher praktisches Beispiel brauchst, schau dir diesen CodePen an. Ich kenne das Gefühl, deinen Code anzustarren, um die Lösung zu finden und zu denken, dass es unmöglich ist. Aber nach dieser Aufgabe fühlte ich mich tatsächlich so, als wären JavaScript und ich endlich Freunde geworden. Eine schwierige Aufgabe wie diese zu meistern, beweist, dass Programmierung nicht so schwer ist. Es braucht nur ein wenig Übung und manchmal viele Tassen Kaffee.