Idee zur Implementierung eines Popup-Maskeneffekts für Kommentarantworten, kompatibel mit IE 8/Chrome/Firefox
|
Ich verfolge wochentags gerne die Nachrichten und stöbere oft bei Tencent! Aber ich sehe selten Antworten auf Kommentare. Also suchte ich sorgfältig danach und stellte fest, dass es über eine Popup-Maske auf einer Seite angezeigt wurde. Also habe ich es sorgfältig studiert und selbst simuliert. Es fühlt sich gut an und ist mit IE 8/Chrome/Firefox kompatibel. Idee: Die Hauptseite und die Maske sind zwei verschiedene Seiten, und die Maske wird mithilfe von JS über ein Iframe geladen. Der Code lautet wie folgt: Hauptseite Code kopieren Der Code lautet wie folgt:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <Kopf> <meta http-equiv="Inhaltstyp" content="text/html;charset=UTF-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <title>iframe anhängen</title> <style type="text/css"> html,body{Höhe:100%;Padding:0px;Margin:0px;} </Stil> </Kopf> <Text> <div><input Typ="Schaltfläche" Wert="Anzeigen" id="Anzeige-ID"/></div> <div><Eingabetyp="Schaltfläche" Wert="Test" ID="Test-ID"/></div> <Skripttyp="text/javascript"> $("#show-id").on("klicken",function(){ $(top.document.body).append('<iframe src="subiframe.html" id="np-pop-iframe" allowtransparency="true" frameborder="0" scrolling="no" style="width: 100%; z-index: 9999; position: fixed; top: 0px; left: 0px; border: none; overflow: hidden; height: 100%;" data-nick="" data-pic="" data-id="" parentid=""></iframe>'); }); $("#test-id").on("click",function(){ Alarm("Test"); }); </Skript> </body> </html> subiframe.html: Code kopieren Der Code lautet wie folgt:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <Kopf> <meta http-equiv="Inhaltstyp" content="text/html;charset=UTF-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <title>Dokument</title> <style type="text/css"> html,body{Höhe:100%;Padding:0px;Margin:0px;} .np-popframe-bg-opacity{ Filter: Alpha (Deckkraft = 50); -moz-Deckkraft: 0,5; Deckkraft: 0,5; } .Verpackung{ Position: absolut; Rand: 1px durchgehend rot; Breite: 800px; Höhe: 800px; Hintergrund: #fff; oben: 1000px; links: 500px; } </Stil> </Kopf> <body class="iframe-body" style="Hintergrundbild: keines; Breite: 100 %; Höhe: 100 %; Hintergrundposition: anfänglich anfänglich; Hintergrundwiederholung: anfänglich anfänglich;"> <div Klasse = "np-popframe-bg-opacity" Stil = "Höhe: 100 %; Breite: 100 %; Hintergrundfarbe: #000;"></div> <div Klasse="np-popframe-bg" id="np-popframe-bg-id" Stil="Höhe: 100 %; Breite: 100 %; Position: absolut; oben: 0px; links: 0px;"></div> <div Klasse="Wrapper" id="Wrapper-ID"></div> </body> <Skripttyp="text/javascript"> (Funktion(){ $("#wrapper-id").animate({top:"100px"},"langsam"); $("#np-popframe-bg-id").on("klicken",function(){ //$(window.parent.document.getElementById("np-pop-iframe")).entfernen(); $("#np-pop-iframe",window.parent.document).entfernen(); }); })(jQuery); </Skript> </html> Hier ist ein Filter erforderlich. Machen Sie die geladene Maske transparent. 1 Die Hauptfunktion von np-popframe-bg-id besteht darin, den äußeren Bereich des Kommentarfelds anzuzeigen. Wenn Sie mit der Maus auf diesen Bereich klicken, wird das Iframe entfernt. 2. Das Div muss auf 100 % Höhe eingestellt werden. Sie müssen davor HTML, body{height:100%;} CSS hinzufügen, sonst ist es ungültig. 3 Ein weiterer Punkt ist die absolute Positionierung. Wenn Sie etwas gewinnen, notieren Sie es, um es nicht zu vergessen! |
<<: Detaillierte Erklärung des Sidecar-Modus in Docker Compose
>>: Implementierung der CSS-Transformation des Seitenumblätter-Animationsdatensatzes
Artikel empfehlen
Detailliertes Tutorial zum PyCharm- und SSH-Remote-Access-Server-Docker
Hintergrund: Einige Experimente müssen auf dem Se...
js-Version zur Realisierung der Rechnerfunktion
In diesem Artikelbeispiel wird der spezifische Co...
js fügt dynamisch Beispielcode für eine Liste eingekreister Zahlen hinzu
1. Fügen Sie zuerst das ul-Tag im Textkörper hinz...
Eine schnelle Lösung für das Problem der PC- und Mobilanpassung
Beim Erstellen einer Webseite müssen wir normaler...
MySQL kontrolliert die Anzahl der Versuche, falsche Passwörter einzugeben
1. So überwachen Sie MySQL-Deadlocks in Produktio...
JavaScript, um das Bild mit der Maus zu bewegen
In diesem Artikel wird der spezifische JavaScript...
So zeigen Sie die Erstellungszeit von Dateien in Linux an
1. Einleitung Ob die Erstellungszeit einer Datei ...
Befehlsliste des Baota Linux-Panels
Inhaltsverzeichnis Pagoda installieren Management...
So aktivieren oder deaktivieren Sie SSH für einen bestimmten Benutzer oder eine bestimmte Benutzergruppe in Linux
Aufgrund Ihrer Unternehmensstandards gestatten Si...
Eine kurze Diskussion über Flinks fehlertoleranten Mechanismus: Jobausführung und Daemon
Inhaltsverzeichnis 1. Fehlertoleranz bei der Joba...
Die perfekte Lösung für das AutoFill-Problem in Google Chrome
In Google Chrome werden Sie nach der erfolgreiche...
Details zum Vergleich der MySQL-Datenkomprimierungsleistung
Inhaltsverzeichnis 1. Testumgebung 1.1 Hardware u...
Eine elegante Möglichkeit, die Autorisierungsanmeldung für WeChat-Applets zu handhaben
Vorwort Wenn das WeChat-Miniprogrammprojekt das A...
Detaillierte Erläuterung der Konzepte, Prinzipien und allgemeinen Verwendung von gespeicherten MySQL-Prozeduren
Dieser Artikel erläutert anhand von Beispielen di...
jQuery realisiert den Gleiteffekt des Dropdown-Menüs
Wenn wir eine Webseite erstellen, möchten wir man...