บทความนี้อธิบายถึงการใช้กล่องพรอมต์ป๊อปอัพแบบ draggable โดย JS+CSS แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
คัดลอกรหัสดังนี้: <! 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">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> กล่องพรอมต์ป๊อปอัพแบบลากได้ที่สร้างโดย JS+CSS </title>
<style type = "text/css">
A {color:#000; FONT-SIZE: 12PX; การตกแต่งข้อความ: ไม่มี}
A: โฮเวอร์ {สี:#900; การตกแต่งข้อความ: ขีดเส้นใต้}
Body {background:; ตัวกรอง: progid: dximagetransform.microsoft.gradient (gradientType = 0, startColorstr =#ffffff, endColorstr =#003366); ล้น: ซ่อน}
#massage_box {ตำแหน่ง: สัมบูรณ์; ซ้าย: นิพจน์ ((body.clientwidth-350)/2); ด้านบน: การแสดงออก ((body.clientheight-200)/2); ความกว้าง: 350px; ความสูง: 200px; ตัวกรอง: dropshadow (color =#666666, OffX = 3, Offy = 3, positive = 2); z-index: 2; ทัศนวิสัย: ซ่อน}
#mask {ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ซ้าย: 0; ความกว้าง: การแสดงออก (body.scrollwidth); ความสูง: การแสดงออก (body.scrollheight); ความเป็นมา:#666; ตัวกรอง: อัลฟ่า (ความทึบ = 60); z-index: 1; ทัศนวิสัย: ซ่อน}
.massage {Border:#036 Solid; ความกว้างของชายแดน: 1 1 3 1; ความกว้าง: 95%; ความสูง: 95%; ความเป็นมา: #FFFF; สี:#036; ขนาดตัวอักษร: 12px; ความสูงของสาย: 150%}
.header {พื้นหลัง:#036; ความสูง: 10%; Font-Family: Verdana, Arial, Helvetica, Sans-Serif; ขนาดตัวอักษร: 12px; Padding: 3 5 0 5; สี: #FFF}
</style>
<!-ใช้การเคลื่อนไหวของเลเยอร์->
<ภาษาสคริปต์ = "JavaScript">
var obj = ''
document.onmouseup = MUP
document.onmousemove = mmove
ฟังก์ชั่น mdown (วัตถุ) {
Object.id
document.all (obj) .setCapture ()
px = event.x-document.all (obj) .style.pixelleft;
py = event.y-document.all (obj) .style.pixeltop;
-
ฟังก์ชั่น mmove () {
ถ้า (obj! = '') {
document.all (obj) .style.left = event.x-px;
document.all (obj) .style.top = event.y-py;
-
-
ฟังก์ชั่น mup () {
ถ้า (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.visibility = 'hidden'" style = "float: ขวา; แสดง: inline; Cursor: Hand"> × </span> </div>
</div> </div>
<div id = "mask"> </div>
<span onclick = "mask.style.visibility = 'มองเห็นได้'; Massage_box.style.visibility = 'มองเห็นได้'" style = "เคอร์เซอร์: hand"> <a href = "#"> <font size = 18px> คลิกพรอมต์นี้ </font> </a> </
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน