JavaScript implementiert eine verschiebbare Modalbox

<Stil>
        * {
            Rand: 0px;
            Polsterung: 0px;
        }
        .login-header {
            Breite: 100 %;
            Textausrichtung: zentriert;
            Höhe: 30px;
            Schriftgröße: 24px;
            Zeilenhöhe: 30px;
            Cursor: Zeiger;
        }
        .Anmelden {
            Anzeige: keine;
            Breite: 500px;
            Höhe: 280px;
            Position: fest;
            Rand: 1px #ebebeb durchgezogen;
            links: 50%;
            oben: 50 %;
            Hintergrund: #fff;
            Kastenschatten: 0px 0px 20px #ddd;
            Z-Index: 999;
            transformieren: übersetzen(-50 %,-50 %);
        }
        .login-titel {
            Breite: 100 %;
            Rand: 10px 0px 0px 0px;
            Textausrichtung: zentriert;
            Höhe: 40px;
            Zeilenhöhe: 40px;
            Schriftgröße: 10px;
            Position: relativ;
            Cursor: bewegen;
        }
        .login-title span {
            Position: absolut;
            Schriftgröße: 12px;
            rechts: -20px;
            oben: -30px;
            Hintergrundfarbe: #fff;
            Rand: 1px #ebebeb durchgezogen;
            Breite: 40px;
            Höhe: 40px;
            Rahmenradius: 20px;
        }
        .login-input-content {
            Rand oben: 20px;
        }
        .login-button {
            Breite: 100px;
            Rand: 30px automatisch 0px automatisch;
            Zeilenhöhe: 40px;
            Schriftgröße: 14px;
            Rand: 1px #ebebeb durchgezogen;
            Textausrichtung: zentriert;
        }
        A {
            Textdekoration: keine;
            Farbe: #000;
        }
        .login-button a {
            Anzeige: Block;
        }
        .login-input Eingabe.Listen-input {
            schweben: links;
            Zeilenhöhe: 35px;
            Höhe: 35px;
            Breite: 350px;
            Rand: 1px #ebebeb durchgezogen;
            Texteinzug: 5px;
        }
        .login-input {
            Überlauf: versteckt;
            Rand: 0px 0px 20px 0px;
        }
        .login-input Bezeichnung {
            schweben: links;
            Breite: 90px;
            Polsterung rechts: 10px;
            Höhe: 35px;
            Zeilenhöhe: 35px;
            Textausrichtung: rechts;
            Schriftgröße: 14px;
        }
        .Anmeldemaske {
            Anzeige: keine;
            Breite: 100 %;
            Höhe: 100%;
            Position: fest;
            oben: 0px;
            links: 0px;
            Hintergrundfarbe: rgba(0, 0, 0, .3);
        }
    </Stil>
</Kopf>
<Text>
    <div class="login-header">Klicken Sie, um das Anmeldefeld anzuzeigen</div>
    <div id="Anmelden" Klasse="Anmelden">
        <div id="title" class="login-title">Mitglied anmelden<span><a id="closeBtn" class="close-login" href="javascript:void(0);" >Schließen</a></span></div>
        <div Klasse="Login-Eingabe-Inhalt">
            <div Klasse="Anmeldeeingabe">
                <label>Benutzername:</label>
                <input type="text" placeholder="Bitte geben Sie Ihren Benutzernamen ein" id="username" class="list-input">
            </div>
            <div Klasse="Anmeldeeingabe">
                <label>Anmeldekennwort:</label>
                <input type="password" placeholder="Bitte geben Sie Ihr Login-Passwort ein" id="password" class="list-input">
            </div>
        </div>
        <div id="loginBtn" class="login-button"><a id="login-button-submit" href="javascript:void(0);" >Mitglied anmelden</a></div>
    </div>
    <!-- Maskenebene-->
<div id="Maske" Klasse="Anmeldemaske"></div>

<Skript>
        // 1. Holen Sie das Element var login = document.querySelector('.login');
        var Maske = document.querySelector('.login-mask');
        var loginHeader = document.querySelector('.login-header');
        var closeBtn = document.querySelector('.close-login');
        var loginTitle = document.querySelector('.login-title');
 
        // 2. Klicken Sie auf die Anmeldeaufforderung, um Login und Maske anzuzeigen;
        loginHeader.addEventListener('klicken', function() {
            login.style.display = "Block";
            Maske.Stil.Anzeige = "Block";
        })
        // 3. Klicken Sie auf die Schaltfläche „Schließen“, um Anmeldung und Maske auszublenden.
        closeBtn.addEventListener('klicken', function() {
            login.style.display = "keine";
            Maske.Stil.Anzeige = "keine";
        })
        // 4. Ziehen Sie das Anmeldefeld // 4.1 Drücken Sie die Maus, um die Koordinaten der Maus im Feld abzurufen loginTitle.addEventListener('mousedown', function(e) {
            var x = e.pageX-login.offsetLeft;
            var y = e.pageY-login.offsetTop;
            // 4.2 Wenn sich die Maus bewegt, subtrahieren Sie die Koordinaten der Maus im Feld von den Koordinaten der Maus auf der Seite, um die linken und oberen Werte des Anmeldefelds zu erhalten. document.addEventListener('mousemove', move)
            Funktion verschieben(Ereignis) {
                login.style.left = Ereignis.SeiteX - x + 'px';
                login.style.top = event.pageY - y + 'px';
            }
            // 4.3 Wenn die Maus losgelassen wird, entferne das Move-Event document.addEventListener('mouseup', function() {
                document.removeEventListener('Mausbewegung', Bewegung)
            })
        })
</Skript>