Artikel ini menjelaskan implementasi kotak prompt pop-up yang dapat diseret oleh JS+CSS. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Salin kode sebagai berikut: <! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<Title> Kotak Prompt Pop-Up Ditarik Dibuat oleh JS+CSS </iteme>
<type style = "text/css">
A {Color:#000; Ukuran font: 12px; Text-Decoration: None}
A: Hover {Color:#900; Dekorasi Teks: Garis Besar}
body {background:; filter: progid: dximagetransform.microsoft.gradient (gradientType = 0, startColorStr =#ffffff, endcolorstr =#0033366); Overflow: Tersembunyi}
#massage_box {position: absolute; Kiri: Ekspresi ((Body.ClientWidth-350)/2); Atas: Ekspresi ((Body.ClientHeight-200)/2); Lebar: 350px; Tinggi: 200px; Filter: dropshadow (warna =#666666, offx = 3, offy = 3, positif = 2); z-index: 2; Visibilitas: Tersembunyi}
#mask {position: absolute; TOP: 0; Kiri: 0; lebar: ekspresi (body.scrollwidth); tinggi: ekspresi (body.scrollheight); Latar Belakang:#666; filter: alpha (opacity = 60); z-index: 1; Visibilitas: Tersembunyi}
.massage {border:#036 solid; Perbatasan-lebar: 1 1 3 1; Lebar: 95%; Tinggi: 95%; Latar Belakang: #FFFF; Warna:#036; font-size: 12px; Line-Height: 150%}
.Header {latar belakang:#036; Tinggi: 10%; Font-Family: Verdana, Arial, Helvetica, Sans-Serif; font-size: 12px; Padding: 3 5 0 5; Warna: #fff}
</tyle>
<!-Menerapkan Lapisan Gerakan->
<bahasa skrip = "javascript">
var obj = ''
Document.onMouseUp = MUP
Document.onMouseMove = mmove
fungsi mdown (objek) {
Objek.id
document.all (obj) .setCapture ()
px = event.x-document.all (obj) .style.pixelleft;
py = event.y-document.all (obj) .style.pixeltop;
}
fungsi mmove () {
if (obj! = '') {
document.all (obj) .style.left = event.x-px;
document.all (obj) .style.top = event.y-py;
}
}
fungsi 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 = 'tersembunyi'; mask.style.visibility = 'tersembunyi'" style = "float: right; display: inline; kursor: tangan"> × </span> </div>
</div> </div>
<Div id = "mask"> </div>
<span onClick = "mask.style.visibility = 'visible'; Massage_box.style.visibility = 'visible'" style = "kursor: hand"> <a href = "#"> <font size = 18px> klik prompt ini </font> </a> </span>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.