Jquery implementiert das Popup-Layer-Plug-in_jquery

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

Code kopieren Der Code lautet wie folgt:

.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 ...

Code kopieren Der Code lautet wie folgt:

$.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

Code kopieren Der Code lautet wie folgt:

//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 xsPop2 = " " titre " " fermer "";
        var xsPop3 = "                                                                                                     var xsPop5 = "

";
      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.

Copier le code Le code est le suivant :

//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

Copier le code Le code est le suivant :

.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

Copier le code Le code est le suivant :

           $(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.