Jquery implémente le plug-in_jquery de la couche contextuelle

Il existe encore de nombreuses applications pour les couches pop-up, telles que la connexion et certaines opérations sur la même page. Les biens des autres appartiennent aux autres, et les vôtres vous appartiennent, j'ai donc toujours voulu écrire un pop-up. plug-in de couche. Sans plus tarder, commençons !

1 : Couche de masque

Pour faire apparaître un calque, vous devez d'abord utiliser un calque de masque pour bloquer la page en dessous. Ce calque de masque est en plein écran et la page doit défiler, donc définissez la position : fixe, il a également un effet de transparence. ma définition Le calque de masque CSS s'appelle masque

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

2 : Principaux paramètres du plug-in

tag : Pourquoi avez-vous besoin d'un tag ? Vous pouvez utiliser des balises pour spécifier les éléments masqués qui doivent être affichés. Vous pouvez spécifier des balises comme sélecteur "#*", afin que les éléments spécifiés puissent être affichés. Ici, j'ai défini la valeur par défaut sur ceci.

mainContent : ce paramètre est-il obligatoire ? Je ne pense pas que ce soit très utile. Je l'ai défini principalement pour les contrôles du serveur. Si tous sont ajoutés au corps, le formulaire ne peut pas être soumis. Mais après avoir cliqué sur Soumettre, la page s'actualisera et le calque pop-up disparaîtra, donc je pense que c'est toujours inutile...

Copier le code Le code est le suivant :

$.fn.xsPop = fonction (options) {
        var defaults = {//Valeur par défaut
              titre : "Fenêtre pop-up", //Titre de la fenêtre
                largeur : 500,
Hauteur : 400,
             tag : this, // Affiche les éléments qui doivent être chargés
              fermer : "Fermer",
                 mainContent: "body"//Container, afin de soumettre le formulaire, mais la soumission actualisera la page...
        };
         var options = $.extend(defaults, options); //Remplacer par les paramètres passés
This.each(function () {
                    xsMain(options.title, options.width, options.heigth, options.tag, options.close, options.mainContent //L'entrée principale du plug-in
);         });
};

3 : Utilisez la fonction xsMain pour ajouter des éléments et lier des événements

Il existe un processus ici qui consiste à contrôler la hauteur et la largeur. Si le paramètre dépasse la hauteur et la largeur de l'écran, il s'adaptera à l'écran, empêchant ainsi le calque contextuel d'être trop grand pour fonctionner. L'autre est d'ajouter du HTML normalement, j'utilise l'ajout de chaîne

Copier le code Le code est le suivant :

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