この記事では、JS+CSSの方法について説明して、ドラッグアンドドロップの美しい丸い角の特殊効果ポップアップレイヤーを実装します。参照のためにそれを共有してください。詳細は次のとおりです。
コードコピーは次のとおりです。
<！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+CSSによって実装された美しい丸い角効果を持つポップレイヤー</title>
<style>
体{
マージン：0px;
パディング：0px;
フォントサイズ：14px;
}
#t {
位置：絶対;
フロート：左;
左：0px;
上：0px;
}
＃a {
フロート：左;
}
.al {
不透明度：0.80;
フィルター：progid：dmimagetransform.microsoft.alpha（style = 0、ofacity = 80、finishopacity = 100）;
}
.al2 {
不透明：0.00;
フィルター：progid：dmimagetransform.microsoft.alpha（style = 0、ofacity = 0、finishopacity = 100）;
}
u {
表示：ブロック;
オーバーフロー：隠し;
高さ：1px
}
u.f1 {
バックグラウンドカラー：＃5cc;
背景：＃5cc;
マージン：0px 3px
}
U.F2 {
バックグラウンドカラー：＃5cc;
国境右：＃5cc 2px solid;
マージン：0px 1px;
国境左：＃5cc 2pxソリッド
}
U.F3 {
バックグラウンドカラー：＃5cc;
国境右：＃5cc 1px solid;
マージン：0px 1px;
国境左：＃5cc 1pxソリッド
}
.d_top {
クリア：両方;
オーバーフロー：隠し;
バックグラウンドカラー：＃5cc;
高さ：29px;
垂直アライイン：ボトム;
}
.d_top a {
フロート：そうです;
マージントップ：5px;
マージン右：13px;
パディングトップ：3px;
幅：18px;
色：赤;
バックグラウンドカラー：＃789;
テキスト装置：なし;
font-weight：bold;
テキストアライグ：センター;
垂直アライイン：中央;
}
.d_topスパン{
フロート：左;
フォントサイズ：13px;
マージン左：15px;
マージントップ：8px;
}
.d_body {
国境右：＃5cc 3px solid;
国境左：＃5cc 3px solid;
パディング：10px;
高さ：200px;
バックグラウンドカラー：#ffff;
}
.d_foot {
クリア：両方;
オーバーフロー：隠し;
バックグラウンドカラー：＃5cc;
高さ：2px;
}
</style>
<script type = "text/javascript">
function $（id）{return document.getElementById（id）;}
関数show（id）{
var t = $（id）;
t.style.width = document.body.clientWidth;
t.style.height = document.body.clientheight;
window.onresize = function（）{
t.style.width = document.body.clientWidth;
t.style.height = document.body.clientheight;
}
$（id）.style.display = "";
}
関数cl（id）{
$（id）.style.display = "none";
}
関数moveevent（e、id）{
var isie =（document.all）？true：fals;
drag = true;
xx = isie？event.x：e.pagex;
yy = isie？event.y：e.pagey;
l = document.getElementById（ID）.OffsetLeft;
t = document.getElementById（id）.offsettop;
document.onmousemove = function（e）{
if（drag）{
x = isie？event.x：e.pagex; if（x <0）x = 0;
y = isie？event.y：e.pagey; if（y <0）y = 0;
document.getElementById（id）.style.left = l-xx+x;
document.getElementById（id）.style.top = t-yy+y;
}
}
document.onmouseup = function（）{
drag = false;
}
}
window.onscroll = function（）{
$（ "back_div"）。style.width = document.body.scrollwidth;
$（ "back_div"）。style.height = document.body.scrollheight;
}
</script>
</head>
<body>
<div id = "a" style = "position：absolute; left：300px; top：200px;">
<a href = "javascript：" onclick = "show（ 't'）">ここをクリックして、丸い角の効果でdivをポップアップします</a> <a href = '// www.vevb.com/'ターゲット= '_ blank> <u>ダイアログボックス</u> </a>！ </div>
<div id = "t" style = "display：none;">
<div id = "back_div">
<iframe style = "position：absolute;左：0px; top：0px;左：0px; bottom：0px; float：左; z-index：-1; margin：0px; padding：0px;" frameborder = "0"スクロール= "no" id = "ifr"> </iframe>
</div>
<div style = "width：500px; position：aspolute; float：left; top：25％; left：30％; z-index：999; clear：blote; overflow：hidden;" id = "t_div">
<iframe style = "position：absolute;左：0px; top：0px;左：0px; bottom：0px; float：左; z-index：-1; margin：0px; padding：0px;" frameborder = "0"スクロール= "no" id = "ifr"> </iframe>
<u> </u> <u> </u> <u> </u>
<div onmousedown = "moveevent（event、 't_div'）">
<span>ようこそ</span>
<a href = "javascript：" onclick = "cl（ 't'）">×</a>
</div>
<div>ようこそ：wulin.com
</div>
<div> </div>
<u> </u> <u> </u> <u> </u>
</div>
</div>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。