JavaScript realisiert den Drag-Effekt der Modalbox

JavaScript realisiert den Drag-Effekt der Modalbox

Hier ist ein Fall des Ziehens einer modalen Box. Die hier zu implementierenden Funktionen sind:

1. Klicken Sie auf die Popup-Ebene. Ein modales Fenster wird eingeblendet und eine graue, durchscheinende Maskierungsebene wird angezeigt.

2. Klicken Sie auf die Schaltfläche „Schließen“, um das modale Feld und die graue, durchscheinende Maskenebene gleichzeitig zu schließen.

3. Platzieren Sie die Maus auf der obersten Zeile des Modalfelds und halten Sie die Maustaste gedrückt, um das Modalfeld zu ziehen und auf der Seite zu verschieben.

4. Lassen Sie die Maustaste los, um das Ziehen des modalen Felds zu beenden.

Die Umsetzungsidee ist:

Klicken Sie auf die Popup-Ebene. Das Modalfeld und die Blockierungsebene werden angezeigt: display:block;

Klicken Sie auf die Schaltfläche „Schließen“. Das Modalfeld und die Deckebene werden ausgeblendet. Anzeige: keine.

Das Prinzip des Ziehens auf der Seite: Maustaste gedrückt halten und verschieben, dann die Maustaste loslassen.

Die auslösenden Ereignisse sind mousedown beim Drücken der Maus, mousemove beim Bewegen der Maus und mouseup beim Loslassen der Maus.

Drag-Vorgang: Wenn sich die Maus bewegt, wird der neueste Wert abgerufen und den linken und oberen Werten des Modalfelds zugewiesen, damit das Modalfeld der Maus folgen kann.

Die durch einen Mausklick ausgelöste Ereignisquelle ist die oberste Zeile, also <div id="title" class="login-title">Login Member.

Die Koordinaten der Maus abzüglich der Koordinaten der Maus in der Box ergeben die tatsächliche Position der modalen Box.

Die Maus ist gedrückt und wir möchten die Koordinaten der Maus in der Box erhalten.

Bewegen Sie die Maus und setzen Sie die Koordinaten der modalen Box auf: Mauskoordinaten minus Boxkoordinaten. Beachten Sie, dass das Bewegungsereignis in das Druckereignis geschrieben wird.

Wenn die Maus losgelassen wird, wird das Ziehen beendet und das Mausbewegungsereignis freigegeben.

Der Implementierungscode lautet:

<!DOCTYPE html>
<html>

<head lang="de">
    <meta charset="UTF-8">
    <Titel></Titel>
    <Stil>
        .login-header {
            Breite: 100 %;
            Textausrichtung: zentriert;
            Höhe: 30px;
            Schriftgröße: 24px;
            Zeilenhöhe: 30px;
        }
        
        ul,
        li,
        ol,
        dl,
        dt,
        tt,
        div,
        P,
        Spanne,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        A {
            Polsterung: 0px;
            Rand: 0px;
        }
        
        .Anmelden {
            Anzeige: keine;
            Breite: 512px;
            Höhe: 280px;
            Position: fest;
            Rand: #ebebeb durchgezogen 1px;
            links: 50%;
            oben: 50 %;
            Hintergrund: #ffffff;
            Kastenschatten: 0px 0px 20px #ddd;
            Z-Index: 9999;
            transformieren: übersetzen(-50 %, -50 %);
        }
        
        .login-titel {
            Breite: 100 %;
            Rand: 10px 0px 0px 0px;
            Textausrichtung: zentriert;
            Zeilenhöhe: 40px;
            Höhe: 40px;
            Schriftgröße: 18px;
            Position: relativ;
            Cursor: bewegen;
        }
        
        .login-input-content {
            Rand oben: 20px;
        }
        
        .login-button {
            Breite: 50%;
            Rand: 30px automatisch 0px automatisch;
            Zeilenhöhe: 40px;
            Schriftgröße: 14px;
            Rand: #ebebeb 1px durchgezogen;
            Textausrichtung: zentriert;
        }
        
        .login-bg {
            Anzeige: keine;
            Breite: 100 %;
            Höhe: 100%;
            Position: fest;
            oben: 0px;
            links: 0px;
            Hintergrund: rgba(0, 0, 0, .3);
        }
        
        A {
            Textdekoration: keine;
            Farbe: #000000;
        }
        
        .login-button a {
            Anzeige: Block;
        }
        
        .login-input Eingabe.Listen-input {
            schweben: links;
            Zeilenhöhe: 35px;
            Höhe: 35px;
            Breite: 350px;
            Rand: #ebebeb 1px durchgezogen;
            Texteinzug: 5px;
        }
        
        .login-input {
            Überlauf: versteckt;
            Rand: 0px 0px 20px 0px;
        }
        
        .login-input Bezeichnung {
            schweben: links;
            Breite: 90px;
            Polsterung rechts: 10px;
            Textausrichtung: rechts;
            Zeilenhöhe: 35px;
            Höhe: 35px;
            Schriftgröße: 14px;
        }
        
        .login-title span {
            Position: absolut;
            Schriftgröße: 12px;
            rechts: -20px;
            oben: -30px;
            Hintergrund: #ffffff;
            Rand: #ebebeb durchgezogen 1px;
            Breite: 40px;
            Höhe: 40px;
            Rahmenradius: 20px;
        }
    </Stil>
</Kopf>

<Text>
    <div class="login-header"><a id="link" href="javascript:;" rel="external nofollow" >Klicken Sie, um das Anmeldefeld anzuzeigen</a></div>
    <div id="Anmelden" Klasse="Anmelden">
        <div id="title" class="login-title">Mitglied anmelden<span><a id="closeBtn" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" class="close-login">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" name="info[Benutzername]" id="Benutzername" class="list-input">
            </div>
            <div Klasse="Anmeldeeingabe">
                <label>Anmeldekennwort:</label>
                <input type="password" placeholder="Bitte geben Sie Ihr Login-Passwort ein" name="info[password]" id="password" class="list-input">
            </div>
        </div>
        <div id="loginBtn" class="login-button"><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" id="login-button-submit">Mitglied anmelden</a></div>
    </div>
    <!-- Deckschicht -->
    <div id="bg" class="login-bg"></div>
    <Skript>
        // 1. Holen Sie das Element var login = document.querySelector('.login');
        var Maske = document.querySelector('.login-bg');
        var link = document.querySelector('#link');
        var closeBtn = document.querySelector('#closeBtn');
        var Titel = Dokument.QuerySelector('#Titel');
        // 2. Klicken Sie auf den Popup-Link link, um Maske und Login anzuzeigen link.addEventListener('click', function() {
                Maske.Stil.Anzeige = "Block";
                login.style.display = "Block";
            })
            // 3. Klicken Sie auf closeBtn, um die Maske auszublenden und sich anzumelden 
        closeBtn.addEventListener('klicken', function() {
                Maske.Stil.Anzeige = "keine";
                login.style.display = "keine";
            })
            // 4. Beginnen Sie mit dem Ziehen // (1) Drücken Sie die Maus, um die Koordinaten der Maus im Feld abzurufen title.addEventListener('mousedown', function(e) {
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            // (2) Wenn die Maus bewegt wird, sind die Koordinaten der Maus auf der Seite abzüglich der Koordinaten der Maus in der Box die linken und oberen Werte der modalen Box document.addEventListener('mousemove', move)

            Funktion verschieben(e) {
                login.style.left = e.pageX - x + "px";
                login.style.top = e.pageY - y + 'px';
            }
            // (3) Wenn die Maus hochspringt, entferne das Mausbewegungsereignis document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', verschieben);
            })
        })
    </Skript>
</body>

</html>

Der Effekt ist:

Dies ist das Ende dieses Artikels über die Verwendung von JavaScript zur Implementierung des modalen Drag-Effekts. Weitere Informationen zum modalen Drag in JavaScript finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • JavaScript implementiert eine verschiebbare Modalbox
  • JavaScript realisiert den Effekt der mobilen Modalbox
  • Bootstrap implementiert Beispielcode für verschachtelte Modalboxen
  • Bootstrap realisiert Modalbox-Effekt
  • Bootstrap-Modalbox zum Erzielen eines Drag-Effekts
  • Bootstrap-Modalbox horizontal und vertikal zentriert und Drag-Funktion hinzugefügt

<<:  30 kostenlose hochwertige englische Ribbon-Schriftarten

>>:  MySQL-Operator-Zusammenfassung

Artikel empfehlen

Bootstrap3.0-Studiennotizentabelle bezogen auf

In diesem Artikel werden hauptsächlich Tabellen e...

CUDA8.0 und CUDA9.0 koexistieren unter Ubuntu16.04

Vorwort Einige der früheren Codes auf Github erfo...

So verwenden Sie Umgebungsvariablen in der Nginx-Konfigurationsdatei

Vorwort Nginx ist ein auf Leistung ausgelegter HT...

Stellen Sie die Grafana+Prometheus-Konfiguration mit Docker bereit

docker-compose-monitor.yml Version: '2' N...

Erstellen Sie ein Docker-Image mit Dockerfile

Inhaltsverzeichnis Erstellen Sie ein Docker-Image...

Mehrere Möglichkeiten zum einfachen Durchlaufen von Objekteigenschaften in JS

Inhaltsverzeichnis 1. Selbstaufzählbare Eigenscha...

Detaillierte Erklärung gängiger Docker-Befehle

1. Hilfe-Befehl 1. Aktuelle Docker-Version anzeig...

Ich zeige Ihnen, wie Sie Schriftsymbole in CSS verwenden

Zunächst einmal: Was ist ein Schriftsymbol? Oberf...

Detaillierte Erläuterung der Vue Simple Notepad-Entwicklung

In diesem Artikelbeispiel wird der spezifische Co...

Auf den Alibaba Cloud Server Tomcat kann nicht zugegriffen werden

Inhaltsverzeichnis 1. Einleitung 2. Lösung 2.1 Ko...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.16 winx64

Ich habe erst vor Kurzem angefangen, mich mit Dat...

Beispielcode zum Implementieren mehrerer Zeilenauslassungen mithilfe von drei erweiterten CSS-Methoden

Vorwort Dies ist eine alte Forderung, aber es gib...

CSS-Beispielcode zum Erzielen eines kreisförmigen Fortschrittsbalkeneffekts mit Farbverlauf

Umsetzungsideen Ganz außen ist ein großer Kreis (...

So erstellen Sie einen Nginx-Image-Server mit Docker

Vorwort Bei der allgemeinen Entwicklung werden Bi...

Installieren des Ping-Tools in einem von Docker erstellten Container

Denn die von Docker abgerufenen Basisimages wie C...