Es gibt immer noch viele Anwendungen für Popup-Ebenen, z. B. die Anmeldung und einige Vorgänge auf derselben Seite. Die Sachen anderer gehören anderen, und Ihre eigenen gehören Ihnen, daher wollte ich schon immer ein Popup schreiben Layer-Plugin. Fangen wir ohne weitere Umschweife an!
1: Maskenebene
Um eine Ebene anzuzeigen, müssen Sie zunächst eine Maskenebene verwenden, um die Seite unten zu blockieren, und die Seite muss gescrollt werden. Sie hat daher auch einen Transparenzeffekt Meine Definition: Das Maskenebenen-CSS heißt mask
.mask
{
Position: fest;
Breite: 100 %;
Höhe: 100 %;
Hintergrundfarbe: weiß;
Überlauf: scrollen;
Filter: alpha(opacity=50);
-moz-Opazität: 0,5;
Deckkraft: 0,5;
Z-Index: 20;
Überlauf: automatisch;
oben: 0px;
Rechts: 0px;
}
2: Hauptparameter des Plug-Ins
Tag: Warum brauchen Sie ein Tag? Sie können Tags verwenden, um ausgeblendete Elemente anzugeben, die eingeblendet werden müssen. Sie können Tags als Selektor „#*“ angeben, damit die angegebenen Elemente eingeblendet werden können. Hier habe ich die Standardeinstellung darauf eingestellt.
mainContent: Ist dieser Parameter erforderlich? Ich denke nicht, dass es sehr nützlich ist. Ich habe es hauptsächlich für Serversteuerungen festgelegt. Wenn alle zum Text hinzugefügt werden, kann das Formular nicht gesendet werden. Aber nachdem ich auf „Senden“ geklickt habe, wird die Seite aktualisiert und die Popup-Ebene verschwindet, sodass ich denke, dass sie immer noch nutzlos ist ...
$.fn.xsPop = Funktion (Optionen) {
var defaults = {//Standardwert
title: „Popup-Fenster“, //Fenstertitel
Breite: 500,
Höhe: 400,
Tag: this, // Popup der Elemente, die geladen werden müssen
schließen: „Schließen“,
mainContent: "body"//Container, um das Formular abzusenden, aber beim Absenden wird die Seite aktualisiert...
};
var options = $.extend(defaults, options); //Mit übergebenen Parametern überschreiben
This.each(function () {
xsMain(options.title, options.width, options.heigth, options.tag, options.close, options.mainContent); //Der Haupteingang des Plug-ins
});
};
3: Verwenden Sie die xsMain-Funktion, um Elemente hinzuzufügen und Ereignisse zu binden
Hier gibt es einen Prozess, der darin besteht, die Höhe und Breite zu steuern. Wenn die Einstellung die Bildschirmhöhe und -breite überschreitet, wird sie an den Bildschirm angepasst und verhindert so, dass die Popup-Ebene für den Betrieb zu groß wird. Die andere besteht darin, HTML normal hinzuzufügen. Ich verwende die Zeichenfolgenaddition
//En fonction des données entrantes, ajoutez un calque de masque et affichez une boîte de dialogue
Fonction xsMain(titre, largeur, hauteur, balise, fermeture, mainContent) {
var divmask = "
";
$(mainContent).append(divmask);
var xsPop1 = " ";
var allHtml = xsPop1 xsPop2 xsPop3 xsPop5;
$(mainContent).append(allHtml);
$(tag).show();
$(tag).appendTo("#xsPopMain");
//Obtenez la hauteur et la largeur du navigateur et effectuez des jugements ultérieurs (hauteur dépassée, limite de bordure en faisant glisser)
clientHeight = window.screen.height;
clientWidth = window.screen.width;
Si (hauteur > clientHeight) {
hauteur = clientHeight - 100;
>
Si (largeur > clientWidth) {
width = clientWidth - 100;
>
$("#xsPop").css({
"hauteur": hauteur "px",
"width": largeur "px",
"margin-top": "-" (hauteur / 2) "px",
"margin-left": "-" (largeur / 2) "px"
});
$("#xsPopMain").css("height", height - $("#xsPopHead").height());
xsdrag("#xsPopHead", "#xsPop" // Lier l'action de glisser
);
$("#xsColse").bind("click", function () { ClosePop(tag, mainContent); }); // Lier l'action de fermeture
>
4 : Fermer l'action
Ici, vous devez d'abord donner l'étiquette au conteneur, sinon elle sera supprimée ensemble lorsque vous la supprimerez plus tard, et l'étiquette ne sera pas trouvée la deuxième fois qu'elle apparaîtra.
//Ferme le calque contextuel
Fonction ClosePop(tag, mainContent) {
$(mainContent).append(tag); //Enregistrez, sinon $("#xsPop").remove() à l'étape 4 effacera la balise
$(tag).hide();
$(".mask").remove();
$("#xsPop").remove();
>
5 : Effet de glisser
Méthode 1 : La première fois que je trouve que c'est un événement qui utilise des éléments, mais il est facile de perdre des éléments et l'effet n'est pas idéal
Copier le code Le code est le suivant :
//Faites glisser et déposez le calque contextuel (méthode échouée, une perte d'objet se produira)
//Control est l'élément glisser, tag est l'élément action, généralement le contrôle est dans la balise
// fonction glisser(contrôle, balise) {
// // var isMove = false;
// var abs_x = 0, abs_y = 0;
// // $(contrôle).mousedown(
// // fonction (événement) {
// // var top = $(tag).offset().top;
// // var gauche = $(tag).offset().left;
// abs_x = event.pageX - gauche;
// // abs_y = event.pageY - top;
// // isMove = true;
}).mouseleave(function () {
// // isMove = false;
// // });
// // $(control).mouseup(function () {
// // isMove = false;
// // });
// // $(document).mousemove(function (event) {
// // si (isMove) {
// // $(tag).css({
// // 'gauche' : event.pageX - abs_x $(tag).width() / 2 - 1,
// // 'top' : event.pageY - abs_y $(tag).height() / 2 - 1
// //
// // }
// // renvoie faux ;
// // });
// }
Méthode 2, la méthode que j'utilise actuellement, utilise le bas et le haut du document, mais il y a encore quelques problèmes, le problème du déplacement trop rapide, et les coordonnées ont un petit saut
J'ai également trouvé un problème. Si je fais glisser le calque contextuel directement vers le haut de l'écran et que je le lâche, haha, vous ne pourrez jamais le faire glisser en arrière ou cliquer pour le fermer. J'ai jeté un œil au calque contextuel sur la page d'accueil de Baidu. Ils ont également ce phénomène, mais après avoir zoomé et dézoomé sur la fenêtre, le calque contextuel reviendra au centre. J'ai également essayé de le faire, mais lorsque j'ai lié onresize, il est apparu qu'il ne pouvait pas se déplacer vers le bas. L'événement qu'ils ont utilisé n'était certainement pas onresize. J'ai donc directement jugé que la position de la souris ne pouvait pas être inférieure à 0.
Copier le code Le code est le suivant :
//Faites glisser et déposez le calque contextuel
//Control est l'élément glisser, tag est l'élément action, généralement le contrôle est dans la balise
Fonction xsdrag(contrôle, balise) {
$(control).mousedown(function (e)//événement emouse
{
var offset = $(this).offset(); //La position du DIV sur la page
var x = e.pageX - offset.left; //Obtient la distance entre le pointeur de la souris et la bordure gauche de l'élément DIV
var y = e.pageY - offset.top; //Obtient la distance entre le pointeur de la souris et la limite supérieure de l'élément DIV
$(document).bind("mousemove", function (ev)//Lier l'événement de mouvement de la souris, car le curseur doit également avoir un effet en dehors de l'élément DIV, donc l'événement de document doit être utilisé à la place de l'événement d'élément DIV
{
If (ev.pageY <= 0) { return; }//Empêcher la fermeture et le déplacement de la bordure après qu'elle dépasse l'écran
$(tag).css({
'gauche' : ev.pageX - x $(tag).width() / 2, // Je dois ajouter ceci à ma mise en page
'top' : ev.pageY - y $(tag).height() / 2
});
});
});
$(document).mouseup(function () {
$(this).unbind("mousemove");
});
>
6 : Feuille de style
La disposition du calque contextuel utilise des valeurs négatives en haut et en haut de la marge gauche, j'ajoute donc la moitié de la hauteur et de la largeur dans mon js
.masque
{
poste : fixe ;
largeur : 100 % ;
hauteur : 100%;
couleur de fond : blanc ;
Débordement : faites défiler ;
Filtre : alpha(opacité=50);
-moz-opacité : 0,5 ;
Opacité : 0,5 ;
indice z : 20 ;
Débordement : auto ;
haut : 0px;
Droite : 0px ;
>
.PopUp
{
Remplissage : 0px ;
Position : absolue ;
z-index : 21 !important;
Couleur de fond : Blanc ;
Style bordure : solide solide solide ;
Largeur de bordure : 1 px ;
Couleur de la bordure : #C0C0C0;
Gauche : 50 % ;
haut : 50% ;
>
.PopHead
{
Couleur d'arrière-plan : #F0F0F0;
Style bordure inférieure : solide ;
Largeur de bordure inférieure : 1 px ;
Couleur de la bordure inférieure : #C0C0C0;
Hauteur : 30 px ;
Curseur : déplacer ;
clip : rect(0px, auto, auto, 0px);
>
.PopHead b
{
flotter : gauche ;
Affichage : bloquer ;
Couleur : #C0C0C0;
famille de polices : Système ;
taille de police : moyenne ;
Hauteur de ligne : 30 px ;
retrait de texte : 2em ;
>
.PopHead durée
{
flotter : à droite ;
Affichage : bloquer ;
Alignement du texte : à droite ;
Hauteur de ligne : 30 px ;
Curseur : pointeur ;
Retrait du texte : 5 px ;
Couleur : #FF0000;
taille de police : 12 pt ;
>
.PopMain
{
Remplissage : 10 px ;
Débordement : auto ;
>
7 : Utilisation des pages
Les contrôles du serveur de test peuvent soumettre des formulaires
$(document).ready(function () {
$("#btnPop").click(function () {
var options = {
titre : "mon papa",
largeur : 500,
Hauteur : 400,
fermer : "fermer",
mainContent : "formulaire"
}
$("#pop1").xsPop(options);
});
});
D'accord, c'est tout. Au départ, je voulais faire une bordure pour changer la taille, mais j'ai trouvé que cela prendrait un certain temps, alors j'ai arrêté de le faire. En fait, pour être honnête, je pense que glisser n'a pas beaucoup de sens, et la taille du contrôle des bordures n'a pas beaucoup de sens non plus, car j'ai défini le débordement et les barres de défilement apparaîtront.
Was sind die JQuery-Plug-Ins?
So bedienen Sie JSON mit JQuery
So löschen Sie Elemente in JQuery
Verwendung der jQuery-Methode hover()
jquery implementiert die Paging-Methode
Was ist ein verstecktes Element in jquery?
Was wird in jquery hervorgehoben?
Einführung in die Plug-Ins, die für die Ausführung von Java durch vscode erforderlich sind
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
