其实这个效果是很常见的,很多现在的网站上都有这个效果,它的主要部分都是用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'
}
}
当点击"弹出"时,显示divTest层,并把ly这个蒙层显示出来,锁定它,点关闭时,隐藏divTest,同时,隐藏ly.
这样就完成了弹出蒙层的效果了,接着是拖动弹出的层,这里主要调用以下几个方法:
var px=0;
var py=0;
var begin=false;
var topDiv;
function down()
{
begin=true;
document.getElementById("divTest").style.cursor= "hand";
event.srcElement.setCapture();
px=document.getElementById("divTest").style.pixelLeft - event.x;
py=document.getElementById("divTest").style.pixelTop - event.y;
}
function document.onmousemove()
{
if(begin)
{
document.getElementById("divTest").style.pixelLeft = px+event.x;
document.getElementById("divTest").style.pixelTop = py+event.y;
}
}
function document.onmouseup()
{
begin=false;
document.getElementById("divTest").style.cursor= "default";
event.srcElement.releaseCapture();
}
前面的divTest中有onmousedown="down()" 后面几个方法的写法有点像C#中的匿名方法,第一次使用,还是不错.
下面是整个HTML的代码:
<html>
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<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>
<div id="ly" style="position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
z-index: 2; left: 0px; display: none;">
</div>
<div id="main" style="background-color: Azure; height:700px;">
<div>
<a onclick="show()">弹出</a>
</div>
<div>
<input type="button" id="t" onclick="javascript:alert('ads');" value="Value" />
</div>
<br />
</div>
</form>
<script type="text/javascript">
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'
}
}
var px=0;
var py=0;
var begin=false;
var topDiv;
function down()
{
begin=true;
document.getElementById("divTest").style.cursor= "hand";
event.srcElement.setCapture();
px=document.getElementById("divTest").style.pixelLeft - event.x;
py=document.getElementById("divTest").style.pixelTop - event.y;
}
function document.onmousemove()
{
if(begin)
{
document.getElementById("divTest").style.pixelLeft = px+event.x;
document.getElementById("divTest").style.pixelTop = py+event.y;
}
}
function document.onmouseup()
{
begin=false;
document.getElementById("divTest").style.cursor= "default";
event.srcElement.releaseCapture();
}
</script>
</body>
</html>
