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