この記事では、JSポップアップドローン可能および閉じたDIV層の完全な実装方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
コードコピーは次のとおりです。
<！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 {height：100％; overflow：hidden;}
ボディ、div、H2 {マージン：0;パディング：0;}
ボディ{font：12px/1.5 tahoma;}
センター{パディングトップ：10px;}
ボタン{カーソル：ポインター;}
#win {position：absolute; top：50％; left：50％; width：400px; height：200px; background：#ffff; border：4px solid＃f90; margin：-102px 0 0 -202px; display：none;}
h2 {font-size：12px; height：18px; text-align：right; background：＃fc0; border-bottom：3px solid＃f90; padding：5px; cursor：move;}
H2スパン{色：＃f90;カーソル：ポインター;背景：#fff; border：1px solid＃f90; padding：0 2px;}
</style>
<スクリプト>
window.onload = function（）
{
var owin = document.getElementById（ "win"）;
var obtn = document.getElementsByTagname（ "ボタン"）[0];
var oclose = document.getElementById（ "close"）;
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 = "none"
};
oclose.onmousedown = function（event）
{
（event || window.event）.cancelbubble = true;
};
oh2.onmousedown = function（event）
{
var event = event || window.event;
bdrag = true;
disx = event.clientx -owin.offsetLeft;
disy = event.clienty -owin.offsettop;
this.setcapture && this.setcapture（）;
falseを返します
};
document.onmousemove = function（event）
{
if（！bdrag）return;
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;
それ=それ<0？ 0：それ;
それ=それ> maxt？ maxt：it;
owin.style.margintop = owin.style.marginleft = 0;
owin.style.left = il + "px";
owin.style.top = it + "px";
falseを返します
};
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> <butth>ポップレイヤー</button> </center>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。