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
Zwei Möglichkeiten, das WeChat-Miniprogramm mit Tencent Maps zu verbinden
Ich habe kürzlich ein WeChat-Applet geschrieben u...
Der Unterschied zwischen HTML-Name-ID und Klasse_PowerNode Java Academy
Name Geben Sie einen Namen für das Tag an. Format...
Detaillierte Erklärung, wie Sie alle untergeordneten Elemente mit CSS auswählen
Wie wähle ich mit CSS rekursiv alle untergeordnet...
MySQL-Optimierungstipps: Analyse der Implementierungsmethoden zur Duplikatsentfernung [Millionen von Daten]
Dieser Artikel veranschaulicht anhand eines Beisp...
Detaillierte Erklärung zur Verwendung des CMD-Befehls zum Bedienen einer MySql-Datenbank
Erstens: Starten und stoppen Sie den MySQL-Dienst...
So installieren und ändern Sie das Anfangskennwort von mysql5.7.18 unter Centos7.3
In diesem Artikel erfahren Sie, wie Sie mysql5.7....
Implementierung von MySQL-indexbasierten Stresstests
1. Datenbankdaten simulieren 1-1 Datenbank- und T...
Detaillierte Erläuterung der dauerhaften Speicherung von Redis unter Docker
In diesem Kapitel beginnen wir mit dem Betrieb vo...
Eine kurze Diskussion über die Unterschiede und eine Zusammenfassung der drei Gleitkommatypen Float, Double und Decimal in MySQL
Die Speichergröße und der Bereich jedes Gleitkomm...
Das Implementierungsprinzip von Vue Router-View und Router-Link
verwenden <div id="app"> <rout...
Detaillierte Erklärung, wie NGINX PV, UV und unabhängige IP der Website zählt
Nginx: PV, UV, unabhängige IP Jeder, der Websites...
Lassen Sie uns ausführlich über die gemeinsame MySQL-Abfrage sprechen
Inhaltsverzeichnis Union-Abfrage 1. Fragen Sie di...
Node.js erstellt ein einfaches Crawler-Case-Tutorial
Vorbereitung Zuerst müssen Sie nodejs herunterlad...
Detaillierter Installationsprozess und Prinzip des Vue-Routers
Inhaltsverzeichnis 1. Implementierungsprinzip des...
Zusammenfassung der MySQL-Tabellen- und Spaltenkommentare
Genau wie bei Code können Sie den Tabellen und Sp...