JavaScript realisiert den Effekt der mobilen Modalbox

In diesem Artikelbeispiel wird der spezifische JavaScript-Code zur Erzielung des mobilen Modalbox-Effekts als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

Seiteneffekt:

Nach dem Klicken auf den Link wird ein modales Anmeldefenster angezeigt. Klicken Sie auf den Link „Schließen“, um das modale Fenster zu schließen. Drücken Sie die Maus im Titelbereich des modalen Fensters, um das modale Fenster zu ziehen. Nach dem Loslassen der Maus stoppt das modale Fenster seine Bewegung.

Umsetzungsideen:

1. Nachdem Sie die Seite mit HTML und CSS erstellt und den Inhalt und Stil des Modalfelds festgelegt haben, blenden Sie das Modalfeld aus: Anzeige: keine. Wenn sich die Hintergrundfarbe der Seite nach dem Klicken auf das Popup-Modalfeld ändert, können Sie zuerst eine Maskenebene hinzufügen und die Maskenebene ausblenden.

2. Fügen Sie dem Element ein Klickereignis hinzu, das nach dem Klicken das modale Feld öffnet - - -onclick

Richten Sie die modale Box und die Maskenebenenanzeige im Ereignishandler ein – zB:

login.style.display = "Block";
loginBg.style.display = "Block";

3. Fügen Sie ein Klickereignis hinzu, um das modale Boxelement zu schließen - onclick

Im Eventhandler einstellen - - - Modalbox und Maskenebene ausblenden - - - zB:

login.style.display = "keine";
loginBg.style.display = "keine";

4. Fügen Sie dem Titel der Modalbox ein Mousedown-Ereignis hinzu - - -mousedown
Holen Sie sich die Mausposition in der Modalbox

5. Fügen Sie dem Mausklickereignis ein Mausbewegungsereignis hinzu - - -mousemove

document.addEventListener('mousemove', bewegen);

Ermitteln Sie die Position der Maus auf der Seite. Der Positionswert der Maus im Modalfeld = der Positionswert des Modalfelds auf der Seite. Weisen Sie den berechneten Positionswert oben und links vom Modalfeld zu, um den Effekt des Ziehens der Maus zu erzielen und der Mausbewegung zu folgen.

6. Wenn die Maus losgelassen wird, sollte die modale Box aufhören, sich zu bewegen. Fügen Sie dem Mausklickereignis - - -mouseup ein Ereignis zum Loslassen der Maus hinzu
Ereignishandler für das Loslassen der Maus: Seite entfernt Mausbewegungsereignis - - -document.removeEventListener('mousemove', move);

Hinweis: Um Ereignisse hinzuzufügen und zu entfernen, trennen Sie die Mausbewegungsfunktion, schreiben Sie einen Funktionsnamen und verweisen Sie beim Hinzufügen und Entfernen von Ereignissen auf den Funktionsnamen.

Codebeispiel:

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Modalbox ziehen</title>
    <Stil>
        * {
            Rand: 0;
            Polsterung: 0;
        }
        
        A {
            Textdekoration: keine;
            Farbe: #000;
        }
        
        .login-header {
            Rand: 100px automatisch;
            Höhe: 30px;
            Zeilenhöhe: 30px;
            Schriftgröße: 24px;
            Textausrichtung: zentriert;
        }
        
        .Anmelden {
            Anzeige: keine;
            Breite: 515px;
            Höhe: 282px;
            Position: fest;
            oben: 50 %;
            links: 50%;
            transformieren: übersetzen(-50 %, -50 %);
            Rand: 1px durchgezogen #ebebeb;
            Hintergrundfarbe: #fff;
            Kastenschatten: 0px 0px 20px #ddd;
            Textausrichtung: zentriert;
            Z-Index: 99999;
        }
        
        .login-titel {
            Position: relativ;
            Höhe: 50px;
            Zeilenhöhe: 50px;
            Schriftgröße: 18px;
            Cursor: bewegen;
        }
        
        .schließen {
            Position: absolut;
            oben: 0;
            rechts: 0;
            transformieren: übersetzen(50 %, -50 %);
            Breite: 36px;
            Höhe: 36px;
            Zeilenhöhe: 36px;
            Schriftgröße: 12px;
            Rahmenradius: 18px;
            Rand: 1px durchgezogen #ddd;
            Farbe: #666;
            Hintergrundfarbe: #fff;
        }
        
        .login-input-content {
            Rand: 10px 0;
        }
        
        .login-input Bezeichnung {
            Anzeige: Inline-Block;
            Breite: 80px;
            Textausrichtung: rechts;
        }
        
        .loginput Eingabe {
            Breite: 300px;
            Höhe: 40px;
            Rand: 10px 0;
            Polsterung links: 10px;
            Rand: 1px durchgezogen #ddd;
            Umrissfarbe: Königsblau;
        }
        
        .loginBtn ein {
            Anzeige: Block;
            Breite: 180px;
            Höhe: 35px;
            Zeilenhöhe: 35px;
            Rand: 10px automatisch;
            Rand: 1px durchgezogen #ddd;
        }
        
        .login-bg {
            Anzeige: keine;
            Position: fest;
            oben: 0;
            links: 0;
            Breite: 100 %;
            Höhe: 100%;
            Hintergrundfarbe: rgba(0, 0, 0, .3);
        }
    </Stil>
</Kopf>

<Text>
    <div class="login-header"><a id="link" href="javascript:;" >Klicken Sie, um das Anmeldefeld anzuzeigen</a></div>
    <div Klasse="Anmelden">
        <div Klasse="Anmeldetitel">
            Mitglied anmelden<span><a class="close" href="javascript:void(0);" >Schließen</a></span>
        </div>
        <div Klasse="Login-Eingabe-Inhalt">
            <div Klasse="Anmeldeeingabe">
                <label for="username">Benutzername:</label>
                <input type="text" name="info[Benutzername]" id="Benutzername" placeholder="Bitte geben Sie Ihren Benutzernamen ein"><br>
            </div>
            <div Klasse="Anmeldeeingabe">
                <label for="password">Anmeldekennwort:</label>
                <input type="password" name="info[password]" id="password" placeholder="Bitte geben Sie Ihr Login-Passwort ein"><br>
            </div>
        </div>
        <div type="submit" value="Mitglied anmelden" class="loginBtn"><a href="javascript:void(0);" >Mitglied anmelden</a></div>
    </div>

    <!-- Deckschicht -->
    <div Klasse="login-bg"></div>
    <Skript>
        var link = document.querySelector('#link');
        var login = document.querySelector('.login');
        var loginBg = document.querySelector('.login-bg');
        var schließen = document.querySelector('.schließen');
        var loginTitle = document.querySelector('.login-title');
        link.addEventListener('klicken', function() {
            login.style.display = "Block";
            loginBg.style.display = "Block";
        })

        schließen.addEventListener('klicken', function() {
            login.style.display = "keine";
            loginBg.style.display = "keine";
        })

        loginTitle.addEventListener('mousedown', Funktion(e) {
            // Position der Maus im modalen Feld berechnen, wenn die Maus gedrückt wird var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;

            // Der bewegten Modalbox eine Position zuweisen Funktion move(e) {
                login.style.left = e.pageX - x + "px";
                login.style.top = e.pageY - y + 'px';
            }

            // Mausereignisse hinzufügen. Wenn die Maus gedrückt wird, bewegt sich die modale Box mit der Maus. document.addEventListener('mousemove', move);

            // Wenn die Maus losgelassen wird, stoppt die Bewegung des Modalfelds document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', verschieben);
            })

        })
    </Skript>
</body>

</html>

Seiteneffekt:

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

js zur Implementierung eines einfachen Modalbox-Beispiels
Detaillierte Erläuterung der Verwendung der AngularJS-Modalbox-Vorlage ngDialog
Einfaches Modalbox-Beispiel, implementiert in nativem JS
Beispielcode zur Entwicklung einer modalen Popup-Komponente für Vue.js
Beispiel für die Verwendung der modalen Box von ngModal in AngularJS
AngularJS Modalbox $modal Beispielcode
JS realisiert den Modalbox-Effekt nach dem Klicken auf das Bild
Bootstrap Validator-Modalbox, JSP, Formularvalidierung, Ajax-Übermittlungsfunktion
AngularJs-Popup-Modalbox (Modell)
js verwendet das Ereignis, um das Aufsteigen zu verhindern und das leere Modalfeld beim Anklicken auszublenden

<<: Codebeispiele für allgemeine Vorgänge bei der Docker-Image-Verwaltung

>>: Mysql implementiert drei Funktionen zum Feldspleißen

Artikel empfehlen

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.12 (Windows-Version)

1. Einleitung Im Projekt wird MySQL verwendet. Ic...

Verwenden Sie die Triggermethode, um ein Popup-Dialogfeld zur Dateiauswahl zu realisieren, ohne auf die Dateitypeingabe klicken zu müssen

Sie können die Trigger-Methode verwenden. In JavaS...

Lösungen für Probleme im Zusammenhang mit der Meldung von Softwarepaketabhängigkeiten während der Installation unter Linux

Inhaltsverzeichnis Hintergrund 1) Aktivieren Sie ...

JavaScript realisiert den Effekt der mobilen Modalbox

Seiteneffekt:

Umsetzungsideen:

Codebeispiel:

Vue-Formulareingabebindung V-Modell

Natives JS zur Implementierung eines einfachen Rechners

Erläuterung der grundlegenden Syntax gespeicherter Prozeduren in der MySQL-Datenbank

Dieser Artikel zeigt Ihnen, wie Sie mit CSS-Kombinationsselektoren spielen

Detaillierte Erklärung der Lösung zur Schriftunschärfe bei Verwendung von Transform in CSS3

MySQL-Initialisierungskennwortvorgang unter Mac

Referenzen und Referenzdetails in Vue3

So erstellen Sie MySQL-Indizes richtig

Die Position der Bildlaufleiste bleibt beim Scrollen der Vant-List-Komponente erhalten

Probleme bei der Installation von MySQL und mysql.sock unter Linux

Artikel empfehlen

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.12 (Windows-Version)

Verwenden Sie die Triggermethode, um ein Popup-Dialogfeld zur Dateiauswahl zu realisieren, ohne auf die Dateitypeingabe klicken zu müssen

Lösungen für Probleme im Zusammenhang mit der Meldung von Softwarepaketabhängigkeiten während der Installation unter Linux

Details zu 7 Arten der Komponentenkommunikation in Vue3

So stellen Sie ein SSL-Zertifikat in einer Windows-Apache-Umgebung bereit, damit die Website https unterstützt

Eine kurze Erläuterung der Syntax der VUE-Uni-App-Vorlage

Vue verwendet Element-UI, um die Menünavigation zu implementieren

So wird eine Select-Anweisung in MySQL ausgeführt

Tutorial zur HTML-Tabellenauszeichnung (6): Farbattribut für dunkle Rahmen BORDERCOLORDARK

MySQL-Index für Anfänger

Konfigurationsmethode für die ZIP-Installation der komprimierten MySQL-Paketversion

Eine kleine Einführung in die Verwendung der Position in HTML

Detaillierte Erklärung zur Verwendung von CSS3 RGB und RGBA (transparente Farbe)

jQuery erzielt den Effekt einer Werbung, die nach oben und unten gescrollt wird

Implementierung der Einzelprozesssteuerung des Linux C-Hintergrunddienstprogramms