jQuery implementiert einen einfachen Popup-Fenstereffekt

jQuery implementiert einen einfachen Popup-Fenstereffekt

In diesem Artikel wird der spezifische Code von jQuery zur Erzielung eines einfachen Popup-Fenstereffekts als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

Effektrealisierungsdiagramm

CSS Code

h1,p,h2{
  Rand: 0;
  Polsterung: 0;
}
.modal_info{
    Anzeige: Flex;
    Sichtbarkeit: versteckt;
    Flex-Richtung: Spalte;
    Elemente ausrichten: Flex-Start;
    Inhalt ausrichten: Flex-Start;
    Breite: 200px;
    Höhe: automatisch;
    Position: fest;
    Rand: automatisch;
    Hintergrundfarbe: #FFFFFF;
    Rahmenradius: 3px;
    oben: 45 %;
    links: 50%;
    Box-Größe: Rahmenbox;
    Z-Index: 111;
    -webkit-transform: Maßstab (0,7);
    -moz-transform: Skala (0,7);
    -ms-transform: Skala (0,7);
    transformieren: Skalierung (0,7);
    Deckkraft: 0;
    -webkit-Übergang: alle 0,3 s;
    -moz-Übergang: alle 0,3 s;
    Übergang: alle 0,3 s;
}
  .modal_info .kopf_blau{
  Polsterung: 5px 10px;
  Höhe: automatisch;
  Box-Größe: Rahmenbox;
  Hintergrund: #2262C6;
  Schriftstil: normal;
  Schriftstärke: fett;
  Schriftgröße: 18px;
  Zeilenhöhe: 18px;
  Farbe: #FFFFFF;
  Breite: 100 %;
  Anzeige: Flex;
  Flex-Richtung: Reihe;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: Leerzeichen zwischen !wichtig;
  Texttransformation: Großschreibung;
  }
  .modal_info .head_blue h1{
    Schriftgröße: 18px;
    Farbe: weiß;
  } 
  .modal_info .body_main{
  Anzeige: Flex;
  Flex-Richtung: Spalte;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: Flex-Start;
  Polsterung: 10px 10px;
  Hintergrundfarbe: #FFFFFF;
  biegen: 1;
  Breite: 100 %;
  Box-Größe: Rahmenbox;
  }
  .modal_info .bottom_button{
  Anzeige: Flex;
  Flex-Richtung: Reihe;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: Abstand herum;
  Breite: 100 %;
  Polsterung: 10px;
  Box-Größe: Rahmenbox;
  }
  .modal_info .bottom_button div{
    Anzeige: Flex;
    Flex-Richtung: Reihe;
    Elemente ausrichten: zentrieren;
    Inhalt ausrichten: zentriert;
    Polsterung: 5px;
    Box-Größe: Rahmenbox;
  }
  
  .modal_info .bottom_button .yes{
    Hintergrundfarbe: #2262C6;
    Farbe: #FFFFFF;
  }
  .modal_info .bottom_button .no{
    Hintergrundfarbe: #FFFFFF;
    Farbe: #505050;
    Rand: 1px durchgezogen #505050;
  }

  .md-zeigen{
    Sichtbarkeit:sichtbar !wichtig;
    -webkit-transform: Skalierung(1);
    -moz-transform: Skalierung(1);
    -ms-transform:Skala(1);
    transformieren: Skalierung(1);
    Deckkraft: 1;
  }

HTML-Code plus jQuery-Code, achten Sie auf die referenzierten CSS und JS
Sie können jede Version von jQuery herunterladen und in

<!DOCTYPE html>
<html>
    <Kopf>
        <title>Popup</title>
        <link rel="stylesheet" href="./modal.css" />
    </Kopf>
    <body style="Hintergrundfarbe: schwarz;">
        <div class="button_click" style="background-color:#FFFFFF;width: 100px;height: 100px;">Klicken Sie hier</div>
    </body>
    <script type="text/javascript" src="jquery-3.5.1.min.js"></script>
    <Skript>
        
        Funktion modal_confirm(Option){
            var {Titel, Frage, Inhalt, Bestätigen, Abbrechen, Stil, btn} = Option;
            var ja_bestätigen,nein_abbrechen;
            btn.fürJeden(item=>{
                wenn(Artikel.ja){
                    ja_bestätigen = Artikel.ja;
                }
                sonst wenn(Artikel.abbrechen){
                    no_cancel = Artikel.abbrechen;
                }
            }
            )
            wenn($('.modal_info')){
                $('.modal_info').entfernen();
            }
            $('body').anhängen(`<div class="modal_info" style="${style?style:''}"></div>`);
            var modal = $('.modal_info');
            modal.anhängen(`<div class="head_blue"><h1>${title?title:'title'}</h1></div>`);
            modal.anhängen(`<div class="body_main"><h1>${Frage?Frage:'Frage'}</h1><p>${Inhalt?Inhalt:'Inhalt'}</p></div>`);
            modal.append(`<div class="bottom_button"><div class="yes">${bestätigen?bestätigen:'bestätigen'}</div><div class="no">${abbrechen?abbrechen:'abbrechen'}</div></div>`);
            setzeTimeout(() => {
                $('.modal_info').addClass('md-show');
            }, 10);
            $('.yes,.no').on('click',function(){
                wenn($(diese).attr('Klasse')==='ja')
                {
                    ja_bestätigen();
                }
                anders{
                    kein_Abbrechen();
                }
                $('.modal_info').removeClass('md-show');
                setzeTimeout(()=>{
                    dies.parentNode.parentNode.entfernen();
                },300);
            })
        }
        $('.button_click').on('klicken',function(){
            modal_bestätigen({
                Titel: 'Titel',
                Frage:'',
                Inhalt: „Inhalt“,
                bestätigen:'',
                abbrechen:'abbrechen',
                Stil: 'Breite: 200px; Höhe: 200px',
                btn:[{
                    ja:Funktion(){
                        console.log('Dies ist bestätigt');
                        }
                    },
                    {
                    Abbrechen:Funktion(){
                        console.log('Dies ist ein Abbruch');
                        }
                    }

                ]
            });
        })
    </Skript>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Zwei einfache Beispiele für Popup-Fenstereffekte, implementiert mit jQuery
  • jQuery implementiert den Popup-Fenstereffekt (System-Eingabeaufforderungsfeld)
  • JQuery zum Erstellen eines benutzerdefinierten Popup-Beispiels
  • Ideen und Codes zur Implementierung von Popup-Spezialeffekten mit JQuery-UI-Dialog
  • Kleines und leistungsstarkes Plug-In für Popup-Fenster der jQuery-Ebene
  • Einfache Implementierung des jQuery-Popup-Effekts
  • jQuery implementiert den Popup-Fensterzentrierungseffekt ähnlich wie alert()
  • jQuery implementiert Popup-Fensterfunktion (Fenster wird in der Mitte angezeigt)
  • jQuery macht Popup-Fenster zur Eingabeaufforderung für den Fenstercodeaustausch
  • Verwenden Sie den Schalter von JQuery, um ein automatisches Popup-Fenster nach dem Laden der Webseite zu realisieren

<<:  MySQL-Implementierung des Funktionsbeispiels „lastInfdexOf“

>>:  Tutorial zu XHTML-Webseiten

Artikel empfehlen

Erstellen Sie eine virtuelle Maschine und installieren Sie das Betriebssystem Redhat Linux auf VMware (grafisches Tutorial)

So erstellen Sie eine virtuelle Maschine auf VMwa...

Zusammenfassung zur Anwendung dekorativer Elemente im Webdesign

<br />Vorwort: Bevor Sie dieses Tutorial les...

MySQL verwendet ein Limit, um die Beispielmethode für Paging zu implementieren

1. Grundlegende Implementierung des Limits Im All...

HTML+CSS lässt Div-Tags Löschsymbole in der oberen rechten Ecke hinzufügen. Beispielcode

1. Anforderungsbeschreibung Zeigt das Löschsymbol...

So installieren Sie Nginx in Docker und konfigurieren den Zugriff über https

1. Laden Sie das neueste Nginx-Docker-Image herun...

Detailliertes Tutorial zur JDK-Installation und Umgebungsvariablenkonfiguration unter Win10

Inhaltsverzeichnis Vorwort 1. Vorbereitung 2. Ins...

Erfahren Sie, wie Sie einen Hadoop 3.x-Pseudocluster auf der Tencent Cloud erstellen

1. Umweltvorbereitung CentOS Linux Version 7.5.18...

So konfigurieren Sie die PDFLatex-Umgebung in Docker

Technischer Hintergrund Latex ist ein unverzichtb...

Implementierung von FIFO in der Linux-Prozesskommunikation

FIFO-Kommunikation (First In First Out) FIFO-Name...

Schritte zum Bereitstellen von Hyper-V zur Desktop-Virtualisierung (grafisches Tutorial)

Für die Bereitstellung von Hyper-V gelten die fol...

Zusammenfassung wissenschaftlicher Grundlagen und Anregungen für Webdesign und -produktion

<br />Im Bereich des Netzwerkdesigns erfreut...

So verwenden Sie den Befehl sed, um bestimmte Zeilen einer Datei effizient zu löschen

Vorwort Wenn wir bestimmte Zeilen in einer Datei ...

Verschiedene Arten von Codebeispielen für das Plug-In für die jQuery-Webseitenüberprüfung

html <!DOCTYPE html> <html lang="de...

Detaillierte Erklärung der grep- und egrep-Befehle in Linux

Vertreter / egrep Syntax: grep [-cinvABC] 'wo...

Detaillierte Erläuterung des einzeiligen Funktionscodes des Datumstyps in MySQL

Einzeilige Funktionen vom Datumstyp in MySQL: CUR...