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:
|
<<: 30 kostenlose hochwertige englische Ribbon-Schriftarten
>>: MySQL-Operator-Zusammenfassung
Artikel empfehlen
Aktualisierungen für React Router V6
Inhaltsverzeichnis ReactRouterV6-Änderungen 1. &l...
Tiefgreifendes Verständnis der MySQL-Selbstverbindung und Join-Assoziation
1. MySQL-Selbstverbindung MySQL muss beim Abfrage...
So verstecken Sie RAR-Dateien in Bildern
Sie können dieses Logo lokal als .rar-Datei speic...
So verwenden Sie einen SSH-Tunnel, um eine Verbindung zum MySQL-Server herzustellen
Vorwort In einigen Fällen kennen wir nur die Intr...
Detaillierte Erläuterung der Wissenspunkte zur Linux-Remoteverwaltung und SSHD-Dienstüberprüfung
1. SSH-Remoteverwaltung SSH-Definition SSH (Secur...
CSS sorgt dafür, dass der Footer automatisch unten bleibt, wenn die Inhaltshöhe nicht ausreicht
Beim UI-Schnittprozess besteht die Seite häufig a...
Detailliertes Tutorial zur Installation einer MySQL-Datenbank in einer Linux-Umgebung
1. Installieren Sie die Datenbank 1) yum -y insta...
Zusammenfassung der gebräuchlichen Buchstaben in Unicode
Die meisten der ersten Computer konnten nur ASCII...
Detaillierte Erläuterung der Idee, mysql8.0.11 zu installieren, das Root-Passwort zu ändern und Navicat für MySQL zu verbinden
1.1. Herunterladen: Laden Sie das Zip-Paket von d...
MySQL-Lernnotizen zum Umgang mit doppelten Daten
MySQL verarbeitet doppelte Daten Einige MySQL-Tab...
Fallstricke bei der Installation des komprimierten MySQL 8.0.18-Pakets und beim Zurücksetzen vergessener Passwörter
http://www.cppcns.com/shujuku/mysql/283231.html S...
Element-ui klickt direkt auf die Zelle in der Tabelle, um sie zu bearbeiten
Inhaltsverzeichnis Ergebnisse erzielen Implementi...
Zusammenfassung einiger meiner häufig verwendeten Linux-Befehle
Ich habe zwei Jahre lang im Betrieb und in der Wa...
Einführung in neue ECMAscript-Objektfunktionen
Inhaltsverzeichnis 1. Objekteigenschaften 1.1 Att...
10 Tipps zum Entwerfen nützlicher, benutzerfreundlicher Webanwendungen
Hier sind 10 Tipps zum Entwerfen benutzerfreundli...