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 MySQL-Halbsynchronisierung
Inhaltsverzeichnis Vorwort MySQL Master-Slave-Rep...
MySQL-Paket für Abfrage ist zu groß – Problem und Lösung
Problembeschreibung: Fehlermeldung: Ursache: com....
Anwendung zur Verarbeitung von HTML-Tag-Überläufen
Verwenden Sie CSS, um Bildlaufleisten zu ändern 1...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.20 unter Windows
Installieren Sie MySQL unter Windows zu Ihrer Inf...
Erfahren Sie, wie Sie eine MySQL-Datenbank auf dem Mac installieren
Laden Sie MySQL für Mac herunter: https://downloa...
Eine schnelle Lösung zum versehentlichen Löschen von MySQL-Daten (MySQL Flashback Tool)
Überblick Binlog2sql ist ein Open-Source-MySQL-Bi...
Beispielcode für die Verwendung von CSS cross-fade() zum Erzielen eines halbtransparenten Hintergrundbildeffekts
1. Anforderungsbeschreibung Bei einem bestimmten ...
So installieren Sie OpenSSH aus dem Quellcode in CentOS 7
Umgebung: Mindestinstallation von CentOS 7.1.1503...
Vue implementiert den Lupeneffekt beim Tab-Umschalten
In diesem Artikelbeispiel wird der spezifische Co...
Vue2.x konfiguriert Routing-Navigations-Guards, um die Benutzeranmeldung und -beendigung zu implementieren.
Inhaltsverzeichnis Vorwort 1. Konfigurieren Sie d...
Ideen und Methoden zur Realisierung von Echtzeit-Protokollberichten mit der reinen Nginx-Konfiguration
Inhaltsverzeichnis Vorwort Umsetzungsideen Implem...
Bringen Sie Ihnen den detaillierten Prozess der Installation von DOClever mit Docker Compose bei
Inhaltsverzeichnis 1. Was ist Docker Compose und ...
Ein Artikel, der Ihnen hilft, die Positionsberechnung in js gründlich zu verstehen
Inhaltsverzeichnis Einführung scrollen Element.sc...
Beispielcode zum Vergleich verschiedener Syntaxformate von vue3
Die Standardvorlagenmethode ähnelt vue2 und verwe...
js canvas implementiert den Bestätigungscode und erhält die Bestätigungscodefunktion
In diesem Artikelbeispiel wird der spezifische Co...