问题分析：
HTML中的浮动窗口，可以使用CSS的定位方式完成，同时使用这种方式来完成这个功能也是一种较为简单的方式，只需要有HTML以及CSS的知识就可以完成了。
举例如下：
在以下示例中，将演示页面左右两侧分别放置一个高度为500像素，宽度为200像素的浮动窗口。示例中使用的定位方式为：固定定位（fixed），所有它们将永远的跟随页面进行滚动。
HTML代码：
<div id="left"><p>我是左侧浮动窗口的内容</p>
</div>
<div id="right">
<p>我是右侧浮动窗口的内容</p>
</div>
CSS代码：
body{/*
* 为body标签设置背景仅仅是为了演示效果。
* 与浮动窗口本身无关。
*/
background-color: #ccc
}
#left, #right{
position: fixed
top: 100px
width: 200px
height: 500px
line-height: 500px
text-align: center
border: 1px solid #000
background-color: #FFF
}
#left{
left: 50px
}
#right{
right: 50px
}
页面初始化效果：
<input type="button" value="点击这里" onclick="sAlert('测试效果<br>还可以直接书写HTML代码 <br>999')" /><script>
function sAlert(str){
var msgw,msgh,bordercolor
msgw=400//提示窗口的宽度
msgh=100//提示窗口的高度
bordercolor="#336699"//提示窗口的边框颜色
titlecolor="#99CCFF"//提示窗口的标题颜色
var sWidth,sHeight
sWidth=document.body.offsetWidth
sHeight=document.body.offsetHeight
var bgObj=document.createElement("div")
bgObj.setAttribute('id','bgDiv')
bgObj.style.position="absolute"
bgObj.style.top="0"
bgObj.style.background="#ffffff"
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75"
bgObj.style.opacity="0.6"
bgObj.style.left="0"
bgObj.style.width=sWidth-80 + "px"
bgObj.style.height=sHeight + "px"
document.body.appendChild(bgObj)
var msgObj=document.createElement("div")
msgObj.setAttribute("id","msgDiv")
msgObj.setAttribute("align","center")
msgObj.style.position="absolute"
msgObj.style.background="white"
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif"
msgObj.style.border="1px solid " + bordercolor
msgObj.style.width=msgw + "px"
msgObj.style.height=msgh + "px"
msgObj.style.top=(document.documentElement.scrollTop + (sHeight-msgh)/2) + "px"
msgObj.style.left=(sWidth-msgw)/2 + "px"
var title=document.createElement("h4")
title.setAttribute("id","msgTitle")
title.setAttribute("align","right")
title.style.margin="0"
title.style.padding="3px"
title.style.background=bordercolor
title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100)"
title.style.opacity="0.75"
title.style.border="1px solid " + bordercolor
title.style.height="18px"
title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif"
title.style.color="white"
title.style.cursor="pointer"
title.innerHTML="关闭"
title.onclick=function(){
document.body.removeChild(bgObj)
document.getElementById("msgDiv").removeChild(title)
document.body.removeChild(msgObj)
}
document.body.appendChild(msgObj)
document.getElementById("msgDiv").appendChild(title)
var txt=document.createElement("p")
txt.style.margin="1em 0"
txt.setAttribute("id","msgTxt")
txt.innerHTML=str
document.getElementById("msgDiv").appendChild(txt)
}
