OK，废话不多说；
按钮就用一个基本的：
<button class="btn">Click me</button>
<div class="dialog">我是浮动的窗口</div>
我们要给浮动层设置一下样式
.dialog{width:200pxheight:200pxborder:solid 1px #000position:absoluteright:10pxtop:100pxline-height:200pxtext-align:centerdisplay:none}
OK ,下面就是JS部分：
首先需要引入一个JS库，版本自己定义：
然后给按钮添加相应的点击事件，让点击button的时候，显示出浮动层
$(".btn").click(function(){
$(".dialog").show(100)
})
<html><style type="text/css">
.black_overlay{
display: none
position: absolutetop: 0%
left: 0%
width: 100%
height: 100%
background-color: black
z-index:1001
-moz-opacity: 0.8
opacity:.80
filter: alpha(opacity=80)
}
.white_content{
display: none
position: absolute
top: 25% left: 25%
width: 50%
height: 50%
padding: 16px
border: 16px solid black
background-color: white
z-index:1002
overflow:auto
}
</style>
<script type="text/javascript">
</script>
<body>
<input type="button" text="弹出层" onClick="document.getElementById('light').style.display='block'document.getElementById('fade').style.display='block'">
<div id="light" class="white_content">
<a href="#" onClick="document.getElementById('light').style.display='none'document.getElementById('fade').style.display='none'" style="color:blackz-index:9999">Close</a>
<div style="width:715pxheight:360pxborder:#ccc solid 1px" id="dituContent">
这里就是弹出的内容
</div>
</div>
</body>
</html>
就是这样的。使用postion属性和层的隐藏和显示就实现啦
