1. Sous-format
Lors de la conception d'un site Web, nous devons concevoir des sous-formulaires modaux, tels que
Cette étape est facile à implémenter, juste div + css est OK, veuillez consulter le code:
La copie de code est la suivante:
<div> </div>
<div>
<div>
<Fargin> Cliquez sur la zone du bloc peut modifier ma position </ Center>
</div>
</div>
La copie de code est la suivante:
.
{
Color en arrière-plan: # 999999;
en bas: 0;
à gauche: 0;
Opacité: 0,3;
Position: fixe;
à droite: 0;
en haut: 0;
Z-Index: 1100;
}
.
{
Color d'arrière-plan: #FFFFF;
Border: 1px solide # 6B94AD;
Box-Shadow: 5px 5px 5px # 6B94AD;
Font-Family: «Microsoft Yahei»;
taille de police: 12px;
hauteur: 120px;
Gauche: 50%;
marge-gauche: -160px;
marge: -160px;
Opacité: 1;
Position: fixe;
en haut: 50%;
Largeur: 320px;
Z-Index: 1110;
}
.
{
hauteur: 25px;
Couleur: #ffff;
Police-poids: 600;
Image de fond: -Moz-linear-gradient (top, # 4A8CC5, # 2963A5);
Image en arrière-plan: -webkit-gradient (linéaire, haut gauche, bas gauche, couleurs-stop (0, # 4A8CC5), couleurs-stop (1, # 2963A5));
Filtre: PROGID: dxiageTransform.Microsoft.gradient (startColorstr = '# 4A8CC5', EndColorstr = '# 2963A5', GradientType = '0'); : :::::::::::::::::::::::::::::::::::: du:-
}
. Modal-Window .head Center
{
Tableau de rembourrage: 2px;
}
L'ajout de HTML et CSS ci-dessus peut facilement réaliser l'effet de la forme modale ci-dessus. où laisse: 50%; top: 50%; marge-gauche: -160px;
Bien sûr, la taille de la forme modale est écrite dans la classe de style.
La copie de code est la suivante:
<div> </div>
<div>
<div>
<Fargin> Cliquez sur la zone du bloc peut modifier ma position </ Center>
</div>
</div>
La deuxième ligne de code est ajoutée à la classe de style .List-window pour remplacer la taille et la position dans la classe .modal-window, mais il garantit également que la forme modale est centrée et affichée.
La copie de code est la suivante:
.List-window
{
Largeur: 600px;
hauteur: 400px;
marge-gauche: -300px;
marge: -200px;
}
Comme indiqué
On peut voir que la mise en œuvre de cette étape est très simple.
2. Lorsque la souris clique sur la tête de la sous-forme, comment faire glisser et déplacer la sous-forme? Après avoir introduit JQ, nous n'avons besoin que de quelques scripts pour résoudre cette petite fonction. Si vous ne le croyez pas, voyons
La copie de code est la suivante:
var gauche, haut, $ ceci;
$ (document) .delegate ('. Modal-window .head', 'Mousedown', fonction (e) {
Left = e.clientx, top = e.clienty, $ this = $ (this) .css ('curseur', 'move');
this.setCapture?
this.setCapture (),
this.onMouSemove = function (ev) {MousMove (ev || événement);
this.onmouseup = mouseup
): $ (document) .bind ("MouseMove", MouseMove) .Bind ("MouseUp", MouseUp);
});
fonction mousmove (e) {
var cible = $ this.parents ('. modal-window');
var l = math.max ((e.clientx - gauche + nombre (cible.css ('margin-left'). Remplace (/ px $ /, '')) || 0), -target.position (). gauche);
var t = math.max ((e.clienty - top + nombre (cible.css ('margin-top'). Remplace (/ px $ /, '')) || 0), -target.position (). haut);
l = math.min (l, $ (window) .width () - cible.width () - cible.position (). Left);
t = math.min (t, $ (window) .Height () - cible.height () - cible.position (). top);
gauche = e.clientx;
top = e.clienty;
Target.css ({'margin-left': l, 'margin-top': t});
}
fonction sourisup (e) {
var el = $ this.css ('curseur', 'par défaut'). get (0);
El.releasecapture?
(
el.releasecapture (),
el.onmousemove = el.onmouseup = null
): $ (document) .unbind ("MouseMove", MouseMove) .Unbind ("MouseUp", MouseUp);
}
Ce code est très court et peut-il fonctionner en douceur dans divers navigateurs.
En fait, son principe de mise en œuvre est très simple et à peu près divisé en trois étapes:
① Lorsque la souris est sous Mousedown à la tête de la forme modale, liez immédiatement les événements Mousemove et Mouseup au document.
② Lorsque la souris n'apparaît pas (pas de souris), si la souris se déplace sous la forme, activez la fonction de mousemove et déplace la position de la forme entière à temps en calculant la distance que la souris déplace.
③Lorsque la souris est rebondi (MouseUp), appelez l'événement MouseUp pour délier l'événement Mousemove et l'événement Mouseup lié sur le document.
Le principe de l'ensemble du processus est: lorsque la souris mousdown est soutenue, l'événement de mouvement de la souris est transféré au document, et la forme entière est traitée via l'événement de mouvement de la souris sur le document.
De plus, il y a une petite astuce dans MouseMove, qui est la gauche globale. Jusqu'où la souris a déplacé.
Après analyse de ce code, il a été constaté que la souris déplace le formulaire ou tout élément du document est assez facile.
Par exemple, si vous souhaitez modifier la taille de la forme en faisant glisser et en déposant, nous avons juste besoin de régler la taille du formulaire dans la fonction de gestion des événements MouseMove et ce sera OK. amélioré à nouveau?
Certaines personnes peuvent demander ce que SetCapture et Releascapture font respectivement? En fait, c'est pour la compatibilité IE. SetCapture permet à l'élément actuel de capturer tous les événements de la souris.