تصف هذه المقالة طريقة التنفيذ الكاملة لطبقة DIV المنبثقة والمغلقة. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> ينبثق JS على طبقة Div التي يمكن سحبها وإغلاقها </title>
<style>
HTML ، الجسم {الارتفاع: 100 ٪ ؛ تجاوز: مخفي ؛}
الجسم ، div ، h2 {margin: 0 ؛ padding: 0 ؛}
الجسم {font: 12px/1.5 tahoma ؛}
المركز {padding-top: 10px ؛}
زر {المؤشر: مؤشر ؛}
#win {الموضع: absolute ؛ أعلى: 50 ٪ ؛ اليسار: 50 ٪ ؛ العرض: 400px ؛ الارتفاع: 200px ؛ الخلفية: #ffff ؛ الحدود: 4px solid #f90 ؛ الهامش: -102px 0 0 -202px ؛ عرض: none ؛}
H2 {font-size: 12px ؛ الارتفاع: 18px ؛ محاذاة النص: يمين ؛ الخلفية: #fc0 ؛ brown-bottom: 3px solid #f90 ؛ padding: 5px ؛ المؤشر: move ؛}
H2 span {color:#f90 ؛ ursor: pointer ؛ background: #fff ؛ الحدود: 1px solid#f90 ؛ padding: 0 2px ؛}
</style>
<script>
window.onload = function ()
{
var owin = document.getElementById ("win") ؛
var obtn = document.getElementSbyTagName ("button") [0] ؛
var oclose = document.getElementById ("Close") ؛
var oh2 = owin.getElementsByTagName ("H2") [0] ؛
var bdrag = false ؛
var disx = disy = 0 ؛
Obtn.onckick = function ()
{
owin.style.display = "Block"
} ؛
oclose.onclick = function ()
{
owin.style.display = "لا شيء"
} ؛
oclose.onmousedown = وظيفة (حدث)
{
(الحدث || window.event) .cancelBubble = true ؛
} ؛
Oh2.Onmousedown = وظيفة (حدث)
{
var event = event || window.event ؛
bdrag = صحيح ؛
disx = event.clientx - owin.offsetleft ؛
disy = event.clienty - owin.offsettop ؛
this.setCapture && this.setCapture () ؛
العودة كاذبة
} ؛
document.onmousemove = وظيفة (حدث)
{
إذا (! bdrag) العودة ؛
var event = event || window.event ؛
var il = event.clientx - disx ؛
var it = event.clienty - disy ؛
var maxl = document.documentElement.clientwidth - owin.offsetWidth ؛
var maxt = document.documentElement.clientheight - owin.offsetheight ؛
il = il <0؟ 0: il ؛
il = il> maxl؟ Maxl: il ؛
IT = IT <0؟ 0:
it = it> maxt؟ مكست: ذلك ؛
owin.style.margintop = owin.style.marginleft = 0 ؛
owin.style.left = il + "px" ؛
owin.style.top = it + "px" ؛
العودة كاذبة
} ؛
document.onmouseup = window.onblur = oh2.onlosecapture = function ()
{
bdrag = خطأ ؛
OH2.RELEASECAPTURE && OH2.RELEASECAPTURE () ؛
} ؛
} ؛
</script>
</head>
<body>
<div id = "win"> <h2> <span id = "close"> × </span> </h2> </viv>
<Center> <utnting> طبقة البوب </button> </center>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.