Implémenter un effet de boîte contextuelle basé sur les compétences JavaScript

Implémenter un effet de boîte contextuelle basé sur les compétences JavaScript_javascript

WBOY

Libérer： 2016-05-16 15:14:47

original

2052 Les gens l'ont consulté

Les boîtes pop-up sont un élément indispensable des pages d'un site Web. Aujourd'hui, avec l'aide de la plateforme Script House, je vais partager avec vous comment utiliser js pour obtenir un simple effet de boîte pop-up. écrit, alors s'il te plaît, pardonne-moi !

Tout d'abord, analysons les composants de la boîte contextuelle. Une simple boîte contextuelle est divisée en tête, contenu et queue. La tête a un titre et un bouton de fermeture, le contenu peut être des graphiques, des médias, iframe, flash, etc., et la queue est le bouton (Confirmer, annuler, etc.), je n'ajouterai pas de boutons à la fin de cet exemple. Cet exemple implémente principalement la partie principale de la boîte contextuelle

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body, div{
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
a {
text-decoration: none;
}
.pop {
border-radius: 5px;
background-color: #fff;
border: #eee 1px solid;
position: absolute;
width: 350px;
left: 35%;
top: 25%;
}
.pop-title {
background-image: linear-gradient(#eee,#efefef);
position: relative;
cursor: pointer;
}
.pop-title h3,.pop-title a{
display: inline-block;
}
.pop-title h3{
font-size: 14px;
margin: 0;
padding: 5px;
}
.pop-title a {
position: absolute;
top: 5px;
right: 5px;
}
.pop-content {
padding: 10px;
}
</style>
</head>
<body>
<div>
<div>
<h3>消息</h3>
<a href="javascript:;">X</a>
</div>
<div>
弹出框已显示
</div>
<div></div>
</div>
</body>
</html>

Copier après la connexion

Une boîte contextuelle activera le mode mouvement lorsque la tête est enfoncée et interdira le mouvement lorsque la tête est relâchée. En fait, c'est ce que cela signifie. Bien sûr, la logique est relativement simple.

Ici, nous pouvons penser à plusieurs variables, les coordonnées X et Y du mouvement, le changement et l'interdiction de mouvement. Ensuite, nous ajoutons les événements onmousedown et onmouseup au titre.

L'événement onmousedown démarre principalement le mouvement.

La logique de l'événement onmouseup est principalement de fermer le mouvement et de désactiver le mouvement de la boîte contextuelle.

Ensuite, nous devons bouger, et lorsque nous avons besoin de bouger, nous devons nous déplacer dans une certaine plage. Ici, nous nous déplaçons à l'intérieur du corps. Nous ajoutons donc l'événement onmousemove au corps. position de la boîte pop-up.

Ces trois événements combinent principalement l'attribut position en CSS et les coordonnées des attributs dans l'événement Event en JS.

var pop = document.getElementsByClassName("pop")[0];
var pop_title = pop.getElementsByClassName("pop-title")[0];
var bd = document.body;
var x = 0;
var y = 0;
var ismove = false; // 是否开启移动
var downx = 30;
var downy = 30;
pop_title.onmousedown = function (e) {
x = e.pageX;
y = e.pageY;
downx = e.offsetX;
downy = e.offsetY;
ismove = true;
}
bd.onmousemove = function (e) {
if (ismove) {
var cx = e.pageX - downx;
var cy = e.pageY - downy;
pop.style.left = cx + "px";
pop.style.top = cy + "px";
x = e.x;
y = e.y;
}
e.preventDefault();
}
pop_title.onmouseup = function (e) {
x = e.pageX;
y = e.pageY;
ismove = false;
console.log("移动完成")
}

Copier après la connexion

Après avoir déplacé la boîte contextuelle, nous ajoutons un événement de fermeture au bouton de fermeture.

//关闭 
var pop_close = pop.getElementsByClassName("pop-close")[0];
pop_close.onclick = function () {
pop.parentNode.removeChild(pop);
}

Copier après la connexion

D'accord, une simple boîte contextuelle est implémentée. Le même code peut être optimisé et encapsulé par lui-même, et d'autres fonctions peuvent être ajoutées. Les problèmes de compatibilité peuvent devoir être résolus par vous-même (versions antérieures à IE9). >

C'est tout pour introduire l'effet de boîte pop-up en utilisant js. J'espère que cela vous sera utile !