Dieser Artikel beschreibt die Implementierung des draggierbaren Popup-Eingabeaufforderung Box von JS+CSS. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
Kopieren Sie den Code wie folgt: <! 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">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<titels> Dragable Popup-Eingabeaufforderung Box Erstellt von JS+CSS </title>
<style type = "text/css">
a {color:#000; Schriftgröße: 12px; Textdekoration: Keine}
A: Hover {Farbe:#900; Textdekoration: Unterstreich}
Body {Hintergrund:; Filter: progid: dimaMagetransform.microsoft.gradient (gradientType = 0, startColorStr =#ffffff, endColorStr =#003366); Überlauf: versteckt}
#massage_box {Position: absolut; Links: Ausdruck ((Körper.Clientwidth-350)/2); Top: Ausdruck ((Body.ClientHeight-200)/2); Breite: 350px; Höhe: 200px; Filter: DropShadow (color =#666666, offx = 3, Offy = 3, positiv = 2); Z-Index: 2; Sichtbarkeit: versteckt}
#mask {Position: absolut; Top: 0; links: 0; Breite: Expression (Körper. Hintergrund:#666; Filter: Alpha (Deckkraft = 60); Z-Index: 1; Sichtbarkeit: versteckt}
.Massage {Border:#036 Solid; Randbreit: 1 1 3 1; Breite: 95%; Höhe: 95%; Hintergrund: #ffff; Farbe:#036; Schriftgröße: 12px; Zeilenhöhe: 150%}
.Header {Hintergrund:#036; Höhe: 10%; Schriftfamilie: Verdana, Arial, Helvetica, Sans-Serif; Schriftgröße: 12px; Polsterung: 3 5 0 5; Farbe: #fff}
</style>
<!-Schichtbewegung implementieren->
<script Language = "JavaScript">
var obj = '' ''
document.onmouseUp = mup
document.onmousemove = mmove
Funktion mdown (Objekt) {
Object.id
document.all (obj) .setCapture ()
px = event.x-dokument.all (obj) .style.pixellEft;
py = event.y-document.all (obj) .style.pixeltop;
}
Funktion mmove () {
if (obj! = '') {
document.all (obj) .style.left = event.x-px;
document.all (obj) .style.top = event.y-py;
}
}
Funktion mup () {
if (obj! = '') {
document.all (obj) .releasecapture ();
Obj = '';
}
}
</script>
</head> <body>
<div id = "massage_box"> <div>
<div onmouseDown = mdown (Massage_box)>
<span onclick = "massage_box.style.visibility = 'Hidden'; Mask.Style.vissibility = 'Hidden'" style = "float: rechts; Anzeige: Inline; Cursor: Hand"> × </span> </div>
</div> </div>
<div id = "mask"> </div>
<span onclick = "mask.style.visibility = 'sichtbar'; Massage_box.style.visibility = 'Sichtbares'" style = "cursor: Hand"> <a href = "#"> <font size = 18px> Klicken Sie auf diese Eingabeaufforderung </font> </a> </span>
</body>
</html>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.