Cet article décrit la mise en œuvre de la boîte d'invite pop-up draggable par JS + CSS. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Copiez le code comme suit: <! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> Boîte d'invite pop-up glissable créée par JS + CSS </TITLE>
<style type = "text / css">
A {couleur: # 000; taille de police: 12px; text-décoration: aucun}
A: Hover {Color: # 900; text-decoration: soulignement}
Body {Background :; Filter: PROGID: dximageTransform.Microsoft.gradient (GradientType = 0, startColorstr = # ffffff, endColorstr = # 003366); débordement: caché}
#massage_box {position: absolue; gauche: expression ((body.clientwidth-350) / 2); TOP: Expression ((body.clientHeight-200) / 2); Largeur: 350px; hauteur: 200px; Filtre: DropShadow (color = # 666666, offx = 3, offy = 3, positif = 2); Z-Index: 2; Visibilité: cachée}
#Mask {position: Absolute; en haut: 0; à gauche: 0; Largeur: Expression (body.scrollwidth); hauteur: expression (body.scrollHeight); Contexte: # 666; filtre: alpha (opacité = 60); Z-Index: 1; Visibilité: cachée}
.massage {border: # 036 solide; largeur frontalière: 1 1 3 1; Largeur: 95%; hauteur: 95%; Contexte: #FFFF; Couleur: # 036; taille de police: 12px; hauteur de ligne: 150%}
.Header {Background: # 036; hauteur: 10%; Font-Family: Verdana, Arial, Helvetica, Sans-Serif; taille de police: 12px; rembourrage: 3 5 0 5; couleur: #fff}
</ style>
<! - Implémentez le mouvement de la couche->
<script linguisse = "javascript">
var obj = ''
document.onmouseup = Mup
document.onmousemove = mmove
fonction mdown (objet) {
Object.id
document.all (obj) .setCapture ()
px = event.x-Document.all (obj) .style.Pixelleft;
py = event.y-document.all (obj) .style.pixeltop;
}
fonction mmove () {
if (obj! = '') {
document.all (obj) .style.left = event.x-px;
document.all (obj) .style.top = event.y-py;
}
}
fonction Mup () {
if (obj! = '') {
document.all (obj) .releSeaCapture ();
Obj = '';
}
}
</cript>
</ head> <body>
<div id = "massage_box"> <div>
<div onmousedown = mdown (massage_box)>
<span onclick = "massage_box.style.visibility = 'Hidden'; mask.style.visibilité = 'Hidden'" style = "float: droite; affichage: en ligne; curseur: main"> × </span> </div>
</div> </div>
<div id = "mask"> </div>
<span onclick = "mask.style.visibilité = 'visible'; massage_box.style.visibilité = 'visible'" style = "curseur: hand"> <a href = "#"> <font size = 18px> cliquez sur cette invite </font> </a> </pan>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.