تصف هذه المقالة تنفيذ مربع المطالبات المنبثقة القابلة للرسوم بواسطة JS+CSS. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
انسخ الرمز على النحو التالي: <! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> مربع موجه المنبثقة السحب التي تم إنشاؤها بواسطة JS+CSS </title>
<type type = "text/css">
A {color:#000 ؛ حجم الخط: 12px ؛ إزالة النص: لا شيء}
A: Hover {color:#900 ؛ تدمير النص: تسطير}
body {background: ؛ filter: progid: dimizageTransform.microsoft.gradient (gradientType = 0 ، startColorstr =#ffffff ، endcolorstr =#003366) ؛ الفائض: مخفي}
#massage_box {الموضع: Absolute ؛ اليسار: التعبير ((body.clientwidth-350)/2) ؛ أعلى: التعبير ((body.clientheight-200)/2) ؛ العرض: 350 بكسل ؛ الارتفاع: 200 بكسل ؛ Filter: dropshadow (color =#666666 ، Offx = 3 ، Offy = 3 ، Idential = 2) ؛ Z-index: 2 ؛ الرؤية: مخفي}
#mask {الموضع: absolute ؛ أعلى: 0 ؛ اليسار: 0 ؛ العرض: التعبير (body.scrollwidth) ؛ الارتفاع: التعبير (body.scrollheight) ؛ الخلفية:#666 ؛ مرشح: ألفا (العتامة = 60) ؛ Z-index: 1 ؛ الرؤية: مخفي}
.Massage {border:#036 Solid ؛ عرض الحدود: 1 1 3 1 ؛ العرض: 95 ٪ ؛ الارتفاع: 95 ٪ ؛ الخلفية: #ffff ؛ اللون:#036 ؛ حجم الخط: 12 بكسل ؛ رفع الخط: 150 ٪}
.header {background:#036 ؛ الارتفاع: 10 ٪ ؛ Font-Family: Verdana ، Arial ، Helvetica ، Sans-Serif ؛ حجم الخط: 12 بكسل ؛ الحشو: 3 5 0 5 ؛ اللون: #fff}
</style>
<!-تنفيذ حركة الطبقة->
<script language = "javaScript">
var obj = ''
document.onmouseup = mup
document.onmousemove = mmove
وظيفة mdown (كائن) {
كائن
document.all (OBJ) .SetCapture ()
px = event.x-document.all (obj) .style.pixelleft ؛
py = event.y-document.all (obj) .style.pixeltop ؛
}
وظيفة Mmove () {
if (obj! = '') {
document.all (obj) .style.left = event.x-px ؛
document.all (obj) .style.top = event.y-py ؛
}
}
وظيفة mup () {
if (obj! = '') {
document.all (obj) .releasecapture () ؛
OBJ = '' ؛
}
}
</script>
</head> <body>
<div id = "massage_box"> <viv>
<div onmousedown = mdown (massage_box)>
<span onClick = "massage_box.style.visibility = 'hidden' ؛ mask.style.visibility = 'Hidden'" style = "float: right ؛ display: inline ؛ incrsor: hand"> × </span> </viv>
</viv> </viv>
<div id = "mask"> </viv>
<span onClick = "mask.style.visibility = 'visible' ؛ massage_box.style.visibility = 'visible'" style = "cursor: hand"> <a href = "#"> <font size = 18px> انقر فوق هذا المطال
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.