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
<!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:
|
<<: MySQL-Implementierung des Funktionsbeispiels „lastInfdexOf“
>>: Tutorial zu XHTML-Webseiten
Artikel empfehlen
Lösung für das Problem mit transparenten Schriftarten nach dem Aktivieren von ClearType im Internet Explorer
Die Lösung für das Problem mit der transparenten S...
Zusammenfassung der Tipps zum Erstellen von Webseiten
Vorwort Dieser Artikel fasst hauptsächlich einige...
Eine kurze Einführung in die Abfrageeffizienz von MySQL-Speicherfeldtypen
Die Suchleistung von der schnellsten bis zur lang...
JavaScript implementiert einen langen Bild-Scroll-Effekt
In diesem Artikel wird der spezifische Code für d...
Implementierung der Nginx-Konfiguration für den Multi-Port- und Multi-Domain-Name-Zugriff
Um mehrere Sites auf einem Server bereitzustellen...
Implementierung des Durchklickens des transparenten Bereichs unregelmäßiger Formen in Electron
Inhaltsverzeichnis Implementierung einer unregelm...
Wählen Sie eine Dropdown-Liste für Webseiten und ein Problem mit der Abdeckung der Div-Ebene aus.
Fragen zu Select-Elementen in HTML wurden an viel...
Detaillierte Schritte zum Erstellen eines NFS-Dateifreigabeservers unter Linux
Linux erstellt NFS-Server Um den Datenaustausch z...
Schreiben eines Schere-Stein-Papier-Spiels in JavaScript
In diesem Artikel finden Sie den spezifischen Cod...
So implementieren Sie Reaktionsfähigkeit beim Lernen des Vue-Quellcodes
Inhaltsverzeichnis Vorwort 1. Schlüsselelemente e...
Memcached-Methode zum Erstellen eines Cache-Servers
Vorwort Viele Webanwendungen speichern Daten in e...
Detaillierte Erklärung des Unterschieds und der Anwendung von CSS3-Filtern: Schlagschattenfilter und Box-Shadow
Um mit Standard-CSS3 den Schatteneffekt eines Ele...
Docker konfiguriert den Speicherort lokaler Images und Container
Verwenden Sie den Befehl „Find“, um Dateien zu fi...
MySQL 8.X Installations-Tutorial unter Windows
Zuvor habe ich MySQL 5.7 verwendet, aber da MySQL...
Detaillierte Erklärung von Abfragebeispielen innerhalb von Unterabfragen in MySql
Wo liegt meine Heimatstadt, wenn ich nach Nordwes...