Continuez avec l'implémentation simple JavaScript ci-dessus de la fenêtre de drag pop-up (i) pour l'apprentissage.
Ce qui suit est l'analyse spécifique du code:
Tout d'abord, confirmons la structure:
Fenêtre flottante: initialement invisible. Comprend la barre de titre et la barre de contenu, avec des barres de titre et des boutons de fermeture à l'intérieur de la barre de titre.
Couche de masque: invisible au début. Utilisé pour définir l'arrière-plan translucide lorsque la fenêtre flottante apparaît.
Bouton: Utilisé pour cliquer pour faire apparaître la fenêtre flottante.
Ce qui suit expliquera en détail
1. Pour permettre à la fenêtre de se déplacer librement, la position de la fenêtre doit être absolue;
/ * Connexion du composant de couche flottante * /. Popup {affichage: aucun; / * Cachette initiale * / largeur: 380px; Hauteur: Auto; / * Haute liberté, car il est incertain, quelle est la quantité de contenu. * / Border: 1px solide # d5d5d5; Contexte: #FFFF; / * Le contenu de la fenêtre est opaque, l'arrière-plan est blanc * / box-shadow: 0 0 3px rgba (0, 0, 0, 0,25); -moz-box-shadow: 0 0 3px rgba (0, 0, 0, 0,25); -webkit-box-shadow: 0 0 3px rgba (0, 0, 0, 0,25); / * La fenêtre de contenu est ombrée * / Border-Radius: 8px; / * Tous les coins utilisent des coins arrondis avec un rayon de 8px, cette propriété est une propriété standard CSS3 * / -moz-frontière-radius: 8px; / * Attributs privés du navigateur Mozilla * / -Webkit-Border-Radius: 8px; / * Attributs privés du navigateur WebKit * / / * Corners arrondis de fenêtre * / Position: Absolute; En haut: 100px; Gauche: 100px; / * positionnement absolu * / z-index: 9000; }2. Ajoutez une barre de titre à la fenêtre et définissez le curseur de la souris de la barre de titre à la forme de glisser (déplacer) (lors de la traînée de Chrome, le curseur deviendra un curseur de texte, et il sera restauré après avoir libéré le bouton de la souris). Ici, vous devez régler un coin arrondi pour les coins supérieur gauche et supérieur droit de la barre de titre.
/ * Title Bar Area * /. Popup_title {hauteur: 48px; hauteur de ligne: 48px; / * Centre verticalement * / rembourrage: 0px 20px; / * Faites une certaine distance de la gauche * / arrière-plan: # f5f5f5; / * Couleur d'arrière-plan * / Border-Bottom: 1px solide #efefef; / * Border inférieur * / Border-Radius: 8px 8px 0 0; / * Utilisez des coins arrondis avec un rayon de 5px en haut à gauche et en haut à droite. Cette propriété est une propriété standard CSS3 * / -moz-border-radius: 8px 8px 0 0; / * Propriété privée du navigateur Mozilla * / -Webkit-Border-Radius: 8px 8px 0 0; / * Propriétés privées du navigateur WebKit * / / * Corners arronnés de la fenêtre * / Couleur: # 535353; taille de police: 16px; / * Couleur de police et taille de police * / curseur: déplacer; / * Style mobile * / -moz-user-select: aucun; / * Firefox all * / -webkit-user-select: aucun; / * Chrome all / safari all / opera15 + * / -ms-user-selec: aucun; / * Ie10 * / -khtml-user-Select: Aucun; / * Browsers précoces * / utilisateur-sélection: Aucun; -o-user-sélection: aucun; / * Les deux attributs ci-dessus ne sont pas actuellement pris en charge, donc je les ai écrits ici pour réduire les risques * /}Voici quelques points de connaissance à comprendre:
1. CSS3 (Border-Radius) Coins arrondi
Border-Radius est une méthode d'abréviation. De plus, les quatre valeurs sont définies dans l'ordre du haut à gauche, du haut-droit, du bas droit, du bas à gauche et du bas à gauche. Les principales situations se produiront dans les situations suivantes:
1. S'il n'y a qu'une seule valeur, alors les quatre valeurs du haut-gauche, du haut-droit, du bas droit et du bas à gauche sont égaux.
2. Il y a deux valeurs, puis le haut-gauche est égal à la droite en bas, et la première valeur est prise; Le haut-droit est égal au bas à gauche, et la deuxième valeur est prise
3. Il y a trois valeurs, la première valeur est de définir le haut à gauche; tandis que la deuxième valeur est en haut à droite et en bas à gauche et qu'ils seront égaux, et la troisième valeur est de régler le bas à droite.
4. Il y a quatre valeurs, la première valeur consiste à définir le haut à gauche et la deuxième valeur est en haut à droite, la troisième valeur en bas à droite et la quatrième valeur est de définir le bas à gauche.
Browsers pris en charge:
2. Curseur: Déplacer
La propriété du curseur spécifie le type de pointeur (curseur) affiché.
Lorsque la valeur de la propriété est déplacée, cela signifie que l'objet mentionné par ce curseur est mobile, généralement une flèche transversale, comme indiqué sur la figure.
3.User-sélection: utilisé pour contrôler la sélectivité du contenu
Valeur automatique, l'utilisateur peut sélectionner le contenu dans l'élément
Aucun - L'utilisateur ne peut sélectionner aucun contenu dans l'élément
Texte - L'utilisateur peut sélectionner le texte dans l'élément
Élément - Le texte est facultatif, mais uniquement dans les limites de l'élément (pris en charge uniquement par IE et FF)
Il convient de noter que l'utilisateur-sélection n'est pas un attribut standard CSS W3C, et le navigateur le prend en charge incomplète et doit être ajusté pour chaque navigateur.
Description de l'utilisateur-sélection:
Définit ou récupère si l'utilisateur est autorisé à sélectionner le texte.
(1) IE6-9 ne prend pas en charge cette propriété, mais prend en charge l'utilisation de l'attribut de balise onSelectStart = "return false;" Pour réaliser l'effet de l'utilisateur-sélection: aucun; Safari et Chrome prennent également en charge cet attribut de balise;
(2) Cette propriété n'est pas prise en charge avant OPERA12.5, mais comme IE6-9, elle prend également en charge l'utilisation de l'attribut de balise privée non-sélectionnable = "ON" pour réaliser l'effet de l'utilisateur-sélection: aucun;
(3) une autre valeur de non-sélectionnable est désactivée; Dans d'autres navigateurs, si le texte est défini sur -ms-user-select: aucun; Dans d'autres navigateurs, l'utilisateur ne pourra pas commencer à sélectionner du texte dans le bloc de texte.
Cependant, si l'utilisateur commence à sélectionner du texte dans d'autres domaines de la page, l'utilisateur peut toujours continuer à sélectionner le texte de zone qui définit le texte sur -ms-user-select: aucun;.
Analyser le code suivant (Remarque: ce code et les résultats de l'analyse de ce code proviennent de W3Help):
<! Doctype html> <html> <body> <div nonlelectable = "on" style = "background: #cc;" > Unselectable = on </ div> <br/> <div style = "background: #cc; -webkit-user-select: aucun;" > -webkit-user-Select: Aucun; </div> <br/> <div style = "background: #cc; -moz-user-Select: Aucun;" > -Moz-User-Select: Aucun; </div> <br/> <div style = "background: #cc;" onSelectStart = "return false;" > onSelectStart = "return false;" </div> </ body> </html>
Les effets de chaque navigateur sont les suivants:
Remarque 1: Le contenu peut être désactivé.
Remarque 2: Aucun contenu n'est interdit d'être sélectionné.
On peut voir que la méthode pour interdire la sélection de contenu est la suivante:
IE SET UNSELECTABLE = "ON" pour la balise, et définissez la méthode de balise surselectStart = "return false;"
Firefox établit des styles privés pour les balises -moz-user-select: Aucun.
Chrome Safari définit un style privé pour le tag -webkit-user-select: Aucun, et définit la méthode de balise surselectStart = "return false;".
Opera set nonlelectable = "on" pour les balises
Solution
Définir les styles pour les étiquettes -moz-user-Select: Aucun; -webkit-user-select: aucun en même temps, définissez un non-sélectionnable = "ON" pour s'assurer que tous les navigateurs peuvent interdire la sélection de contenu.
Si vous définissez le style de sélection interdit sur la barre de titre de la fenêtre pop-up de différence flottante dans le cas, vous pouvez le définir comme ceci:
<div id = "popup_title" nonselectable = "on"> connecter <a href = "javascript: hidepopup ();"> </a> </div>
.popup_title {-moz-user-select: aucun; / * Firefox all * / -webkit-user-select: aucun; / * Chrome all / safari all / opera15 + * / -ms-user-selec: aucun; / * Ie10 * / -khtml-user-Select: Aucun; / * Browsers précoces * / utilisateur-sélection: Aucun; -o-user-sélection: aucun; / * Les deux attributs ci-dessus ne sont pas actuellement pris en charge, écrits ici pour réduire les risques * /}Remarque: Cet article est original, adresse: http://www.cnblogs.com/wanghuih/p/5576910.html
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.