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
Detaillierte Erklärung der Vue-Filter
<Text> <div id="Wurzel"> &l...
Einige Fallstricke beim JavaScript Deep Copy
Vorwort Als ich zuvor zu einem Vorstellungsgesprä...
JavaScript implementiert das mobile Puzzlespiel mit neun Rastern
In diesem Artikel wird der spezifische Code für J...
Zusammenfassung der Fallstricke bei Virtualbox Centos7 NAT+Host-Only-Netzwerken
Inhaltsverzeichnis 1. Problemhintergrund 2. Welch...
Beispielcode zur Installation von ElasticSearch und Kibana unter Docker
1. Einleitung Elasticsearch erfreut sich derzeit ...
Erklären Sie kurz die Verwendung von „group by“ in SQL-Anweisungen
1. Übersicht Gruppieren nach bedeutet, Daten nach...
Detaillierte Erläuterung der erweiterten Konstruktionseigenschaften von Vue
Inhaltsverzeichnis 1. Richtlinie Zollrichtlinie 2...
So ändern Sie das Passwort in MySQL 5.7.18
So ändern Sie das Passwort in MySQL 5.7.18: 1. Fa...
Tutorial zur Installation und Browserverwendung des leichten Objektspeicherdienstes Minio
Inhaltsverzeichnis Einführung Installieren 1. Ers...
Docker verwendet Busybox, um ein Basis-Image zu erstellen
Die erste Zeile eines Docker-Images beginnt mit e...
Avue-CRUD-Implementierungsbeispiel für einen komplexen dynamischen Header auf mehreren Ebenen
Inhaltsverzeichnis Vorwort Hintergrunddatenspleiß...
Detaillierte Schritte zur vollständigen Deinstallation und Neuinstallation von MySQL unter Windows 10
Ich glaube, dass jeder MySQL aus verschiedenen Gr...
Einführung in die MySQL-Entsperr- und Sperrtabelle
MySQL Lock-Übersicht Im Vergleich zu anderen Date...
Wachstumserfahrung eines Webdesigners
<br />Vorab muss ich sagen, dass ich ein abs...
Tutorial zum Erstellen eines SVN-Servers mit Docker
SVN ist die Abkürzung für Subversion, ein Open-So...