บทความนี้อธิบายถึงวิธีการใช้งานที่สมบูรณ์ของ JS Pop-Up Droneable และ Div Div Layer แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
การคัดลอกรหัสมีดังนี้:
<! 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 ปรากฏขึ้นชั้น div ที่สามารถลากและปิด </title>
<style>
html, body {ความสูง: 100%; overflow: hidden;}
Body, Div, H2 {margin: 0; padding: 0;}
ร่างกาย {ฟอนต์: 12px/1.5 tahoma;}
ศูนย์ {padding-top: 10px;}
ปุ่ม {เคอร์เซอร์: ตัวชี้;}
#win {ตำแหน่ง: Absolute; Top: 50%; ซ้าย: 50%; Width: 400px; ความสูง: 200px; พื้นหลัง: #FFFF; ชายแดน: 4PX SOLID #F90; มาร์จิ้น: -102px 0 0 -202px;
H2 {FONT-SIZE: 12PX; ความสูง: 18PX; TEXT-ALAGIN
H2 Span {Color:#F90; Cursor: Pointer; Background: #FFF; Border: 1px Solid#F90; Padding: 0 2px;}
</style>
<script>
window.onload = function ()
-
var owin = document.getElementById ("win");
var obtn = document.getElementsByTagname ("ปุ่ม") [0];
var oclose = document.getElementById ("ปิด");
var oh2 = owin.getElementsByTagname ("H2") [0];
var bdrag = false;
var disx = disy = 0;
obtn.onclick = function ()
-
owin.style.display = "block"
-
oclose.onclick = function ()
-
owin.style.display = "ไม่มี"
-
oclose.onmousedown = function (เหตุการณ์)
-
(เหตุการณ์ || window.event) .cancelBubble = true;
-
OH2.onmousedown = ฟังก์ชั่น (เหตุการณ์)
-
var event = เหตุการณ์ || window.event;
bdrag = true;
disx = event.clientx - owin.offsetleft;
disy = event.clienty - owin.offsettop;
this.setCapture && this.setCapture ();
กลับเท็จ
-
document.onmousemove = ฟังก์ชั่น (เหตุการณ์)
-
ถ้า (! bdrag) กลับมา;
var 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;
มัน = มัน <0? 0: มัน;
มัน = มัน> maxt? 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 = false;
OH2.ReleAsecapture && oh2.releasecapture ();
-
-
</script>
</head>
<body>
<div id = "win"> <h2> <span id = "close"> × </span> </h2> </div>
<center> <putton> เลเยอร์ป๊อป </button> </enter>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน