JavaScript realisiert den Effekt der mobilen Modalbox

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

Detaillierte Erläuterung gängiger Methoden der Vue-Entwicklung

Inhaltsverzeichnis $nächsterTick() $forceUpdate()...

Vollständige Liste der CentOS7-Firewall-Betriebsbefehle

Inhaltsverzeichnis Installieren: 1. Grundlegende ...

Einige gängige CSS-Layouts (Zusammenfassung)

Zusammenfassung In diesem Artikel werden die folg...

MySQL implementiert eine Funktion ähnlich der MySQL-Methode oder gespeicherten Prozedur connect_by_isleaf

In letzter Zeit gibt es eine besonders ungewöhnli...

Implementierungscode für die HTML-Drag & Drop-Funktion

Basierend auf Vue Die Kernidee dieser Funktion be...

MySQL-Datenbank GTID realisiert Master-Slave-Replikation (super praktisch)

1. Maria-Quelle hinzufügen vi /etc/yum.repos.d/Ma...

Sechs mit CSS3 implementierte Randübergangseffekte

Sechs EffekteImplementierungscode html <h1>...

Detaillierte Erläuterung der MERGE-Speicher-Engine von MySQL

Die MERGE-Speicher-Engine behandelt eine Gruppe v...

Beispiel für eine Nginx-Cache-Konfiguration

Beim Entwickeln und Debuggen einer Webanwendung s...

So stellen Sie einzelne Tabellendaten mithilfe der vollständigen MySQL-Datenbanksicherungsdaten wieder her

Vorwort Beim Sichern der Datenbank wird eine voll...

Verwenden von JavaScript-Unterschieden zum Implementieren eines Vergleichstools

Vorwort Bei der Arbeit muss ich jede Woche die vo...

Wie wirkt sich der zusammengesetzte Index von MySQL aus?

Inhaltsverzeichnis Hintergrund Zusammengesetzte I...

VUE+Canvas implementiert den Beispielcode des Desktop-Flipper-Brick-Breaking-Spiels

Jeder hat schon Flipper und Ziegelsteinzertrümmer...

So ändern Sie das ROOT-Passwort in MySql8.0 und höheren Versionen richtig

Bereitstellungsumgebung: Installationsversion Red...

mysql + mybatis implementiert gespeicherte Prozedur + Transaktion + gleichzeitigen Mehrfachabruf von Seriennummern

Gespeicherte Datenbankprozeduren DROP-VERFAHREN, ...