この記事では、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プログラミングに役立つことを願っています。