Code1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">2
<HTML xml:lang="zn" xmlns="http://www.w3.org/1999/xhtml">3
<HEAD>4
<TITLE>浮动层居中的对话框效果演示</TITLE>5
<META http-equiv=content-type content="application/xhtml+xml; charset=gb2312">6
7
<STYLE type=text/css>
8
HTML {}{9
HEIGHT: 100%10
}11
BODY {}{12
HEIGHT: 100%13
}14
BODY {}{15
FONT-SIZE: 14px; FONT-FAMILY: Tahoma, Verdana, sans-serif16
}17
DIV.neat-dialog-cont {}{18
Z-INDEX: 98; BACKGROUND: none transparent scroll repeat 0% 0%; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%19
}20
DIV.neat-dialog-bg {}{21
Z-INDEX: -1; FILTER: alpha(opacity=70); LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%; BACKGROUND-COLOR:lightblue; opacity: 0.722
}23
DIV.neat-dialog {}{24
BORDER-RIGHT: #444 1px solid; BORDER-TOP: #444 1px solid; Z-INDEX: 99; MARGIN-LEFT: auto; BORDER-LEFT: #444 1px solid; WIDTH: 30%; MARGIN-RIGHT: auto; BORDER-BOTTOM: #444 1px solid; POSITION: relative; TOP: 25%; BACKGROUND-COLOR: #fff25
}26
DIV.neat-dialog-title {}{27
PADDING-RIGHT: 0.3em; PADDING-LEFT: 0.3em; FONT-SIZE: 0.8em; PADDING-BOTTOM: 0.1em; MARGIN: 0px; LINE-HEIGHT: 1.2em; PADDING-TOP: 0.1em; BORDER-BOTTOM: #444 1px solid; POSITION: relative28
}29
IMG.nd-cancel {}{30
RIGHT: 0.2em; POSITION: absolute; TOP: 0.2em31
}32
DIV.neat-dialog P {}{33
PADDING-RIGHT: 0.2em; PADDING-LEFT: 0.2em; PADDING-BOTTOM: 0.2em; PADDING-TOP: 0.2em; TEXT-ALIGN: center34
}35
36
</STYLE>37
38
<SCRIPT type=text/javascript>39
function NeatDialog(sHTML, sTitle, bCancel)40
{41
window.neatDialog = null;42
this.elt = null;43
if (document.createElement && document.getElementById)44
{45
var dg = document.createElement("div");46
dg.className = "neat-dialog";47
if (sTitle)48
sHTML = '<div class="neat-dialog-title">'+sTitle+49
((bCancel)?50
'<img src="x.gif" alt="Cancel" class="nd-cancel" />':'')+51
'</div>\n' + sHTML;52
dg.innerHTML = sHTML;53
54
var dbg = document.createElement("div");55
dbg.id = "nd-bdg";56
dbg.className = "neat-dialog-bg";57
58
var dgc = document.createElement("div");59
dgc.className = "neat-dialog-cont";60
dgc.appendChild(dbg);61
dgc.appendChild(dg);62
63
//adjust positioning if body has a margin64
if (document.body.offsetLeft > 0)65
dgc.style.marginLeft = document.body.offsetLeft + "px";66
67
document.body.appendChild(dgc);68
if (bCancel) document.getElementById("nd-cancel").onclick = function()69
{70
window.neatDialog.close();71
};72
this.elt = dgc;73
window.neatDialog = this;74
}75
}76
NeatDialog.prototype.close = function()77
{78
if (this.elt)79
{80
this.elt.style.display = "none";81
this.elt.parentNode.removeChild(this.elt);82
}83
window.neatDialog = null;84
}85
86
function openDialog()87
{88
89
var sHTML = '<p>WEB开发脚本特效集演示中心，<a href="http://www.">www.</a>国内最大的WEB开发资源社区！</p>'+90
'<p><button onclick="window.neatDialog.close()">关闭!</button></p>';91
new NeatDialog(sHTML, "欢迎光临!", false);92
93
}94
95
</SCRIPT>96
<META content="MSHTML 6.00.3790.630" name=GENERATOR></HEAD>97
<BODY>98
<H1>浮动层居中的对话框效果演示</H1>99
<BUTTON onclick=openDialog()>演示层提示效果</BUTTON>100
</BODY></HTML>101
102
<a href="http://www.HTML/jsrun/">网页脚本特效集</a> 103
本内容来源于耽恋免费资源站，找免费就上www.DLcom.org，原文地址：http://www.dlcom.org/js/6/200808/1124602.html演示地址：http://www.dlcom.org/js/6/200808/1124602.html
另一个为修改版，可以拖动层。
Code1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd\">2
<HTML xml:lang="zn" xmlns="http://www.w3.org/1999/xhtml">3
<HEAD>4
<TITLE>浮动层居中的对话框效果演示</TITLE>5
<META http-equiv=content-type content="application/xhtml+xml; charset=gb2312">6
<STYLE type=text/css>7
HTML {}{8
HEIGHT: 100%9
}10
BODY {}{11
HEIGHT: 100%12
}13
BODY {}{14
FONT-SIZE: 14px; FONT-FAMILY: Tahoma, Verdana, sans-serif15
}16
DIV.neat-dialog-cont {}{17
Z-INDEX: 98; BACKGROUND: none transparent scroll repeat 0% 0%; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%18
}19
DIV.neat-dialog-bg {}{20
Z-INDEX: -1; FILTER: alpha(opacity=70); LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%; BACKGROUND-COLOR: #333; opacity: 0.721
}22
DIV.neat-dialog {}{23
Z-INDEX: 99; MARGIN-LEFT: auto; WIDTH: 30%; MARGIN-RIGHT: auto; POSITION: absolute; left: 35%; TOP: 25%; BACKGROUND-COLOR: #fff24
}25
DIV.neat-dialog-title {}{26
PADDING-RIGHT: 0.3em; PADDING-LEFT: 0.3em; FONT-SIZE: 0.8em; PADDING-BOTTOM: 0.1em; MARGIN: 0px; LINE-HEIGHT: 1.2em; PADDING-TOP: 0.1em; POSITION: relative27
}28
IMG.nd-cancel {}{29
RIGHT: 0.2em; POSITION: absolute; TOP: 0.2em30
}31
DIV.neat-dialog P {}{32
PADDING-RIGHT: 0.2em; PADDING-LEFT: 0.2em; PADDING-BOTTOM: 0.2em; PADDING-TOP: 0.2em; TEXT-ALIGN: center33
}34
35
</STYLE>36
<META content="MSHTML 6.00.3790.630" name=GENERATOR></HEAD>37
<BODY>38
<H1>浮动层居中的对话框效果演示</H1>39
<BUTTON onclick=openDialog()>演示层提示效果</BUTTON>40
</BODY></HTML>41
42
<a href="http://www.alixixi.comhtml/jsrun">欢迎访问阿里西西网页脚本特效集</a>43
<script type=text/javascript>44
function drag(o,s)45
{46
if (typeof o == "string") o = document.getElementById(o);47
o.orig_x = parseInt(o.style.left) - document.body.scrollLeft;48
o.orig_y = parseInt(o.style.top) - document.body.scrollTop;49
o.orig_index = o.style.zIndex;50
//author: www.longbill.cn51
o.onmousedown = function(a)52
{53
this.style.cursor = "move";54
this.style.zIndex = 10000;55
var d=document;56
if(!a)a=window.event;57
var x = a.clientX+d.body.scrollLeft-o.offsetLeft;58
var y = a.clientY+d.body.scrollTop-o.offsetTop;59
60
d.ondragstart = "return false;"61
d.onselectstart = "return false;"62
d.onselect = "document.selection.empty();"63
64
if(o.setCapture)65
o.setCapture();66
else if(window.captureEvents)67
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);68
69
d.onmousemove = function(a)70
{71
if(!a)a=window.event;72
o.style.left = a.clientX+document.body.scrollLeft-x;73
o.style.top = a.clientY+document.body.scrollTop-y;74
o.orig_x = parseInt(o.style.left) - document.body.scrollLeft;75
o.orig_y = parseInt(o.style.top) - document.body.scrollTop;76
}77
78
d.onmouseup = function()79
{80
if(o.releaseCapture)81
o.releaseCapture();82
else if(window.captureEvents)83
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);84
d.onmousemove = null;85
d.onmouseup = null;86
d.ondragstart = null;87
d.onselectstart = null;88
d.onselect = null;89
o.style.cursor = "normal";90
o.style.zIndex = o.orig_index;91
}92
}93
94
if (s)95
{96
var orig_scroll = window.onscroll?window.onscroll:function (){};97
window.onscroll = function ()98
{99
orig_scroll();100
o.style.left = o.orig_x + document.body.scrollLeft;101
o.style.top = o.orig_y + document.body.scrollTop;102
}103
}104
}105
</script>106
107
108
<SCRIPT type=text/javascript>109
function NeatDialog(sHTML)110
{111
window.neatDialog = null;112
this.elt = null;113
if (document.createElement && document.getElementById)114
{115
var dg = document.createElement("div");116
dg.className = "neat-dialog";117
dg.id = "naodai";118
sHTML = '<div class="neat-dialog-title">'+ sHTML;119
dg.innerHTML = sHTML;120
121
var dbg = document.createElement("div");122
dbg.id = "nd-bdg";123
dbg.className = "neat-dialog-bg";124
125
var dgc = document.createElement("div");126
dgc.className = "neat-dialog-cont";127
dgc.appendChild(dbg);128
dgc.appendChild(dg);129
130
//adjust positioning if body has a margin131
if (document.body.offsetLeft > 0)132
dgc.style.marginLeft = document.body.offsetLeft + "px";133
134
document.body.appendChild(dgc);135
this.elt = dgc;136
window.neatDialog = this;137
}138
}139
NeatDialog.prototype.close = function()140
{141
if (this.elt)142
{143
this.elt.style.display = "none";144
this.elt.parentNode.removeChild(this.elt);145
}146
window.neatDialog = null;147
}148
149
function openDialog()150
{151
152
var sHTML = '<p>阿里西西WEB开发脚本特效集演示中心，阿里西西<a href="http://www.alixixi.com">http://www.alixixi.com</a>国内最大的WEB开发资源社区！</p>'+153
'<p><button onclick="window.neatDialog.close()">关闭!</button></p><p>欢迎访问脑袋博客http://www.webphper.cn</p></div>';154
new NeatDialog(sHTML);155
drag("naodai",0);156
}157
</SCRIPT>158
</body>159
</html>160
演示地址：http://www.webphper.cn/naodai/index.php?load=read&id=550#book151
浙公网安备 33010602011771号