弹出可拖动层并蒙住页面

弹出可拖动层并蒙住页面2009-11-06 cnblogs mysoul其实这个效果是很常见的,很多现在的网站上都有这个效果,它的主要部分都是用JS实现的,昨天注意看了一下,原理说通了还是很简单的,不过我一开始什么都不知道.所以做起来很麻烦..换了很多的方案.,.

1）首先是要弹出一个层来,这个我想很简单.一开始.把这个层隐藏了,在方法中显示就行了,

2）然后是要禁用整个页面,这里我走了很多的弯路.,其实它也是一个层,不过是加了点小东西在里面,

3）然后是弹出的这个层要可以拖动,

先在页面上布几个层,分别如下

<div id="ly" style="position: absolute; top: 0px; filter: alpha（opacity=60）; background-color: #777; z-index: 2; left: 0px; display: none;">

这个层是蒙住页面的层,filter: alpha（opacity=60）; 应该就是禁用那个效果的滤镜吧,

<div>
<a onclick="show（）">弹出</a>
</div>
<div id="divTest" style="position: absolute; z-index: 3; width: 540; height: 170px;
background-color: Yellow; display: none; top: 100px; left: 100px;">
<div id="dd" style="background-color: Red; width: 365px; height: 20px; float: left;"
onmousedown="down（）">
</div>
<div style="background-color: Red; width: 35px; height: 20px;">
<a onclick="closes（）">关闭</a>
</div>
</div>
function show（）
{
document.all.ly.style.display="block";
document.all.ly.style.width=document.body.clientWidth+20;
document.all.ly.style.height=document.body.clientHeight+20;
document.all.divTest.style.display="block";
document.getElementById（"divTest"）.style.visibility="visible";
}
function closes（）
{
if（window.confirm（"关闭这个层"））
{
document.getElementById（"divTest"）.style.visibility="hidden";
document.all.ly.style.display="none"
}
}