JS与CSS结合 实现DIV显示/隐藏透明层
程序员文章站
2022-06-07 09:37:27
...
<style>
#massage_box{ position:absolute; left:expression((body.clientWidth-massage_box.offsetWidth)/2); top:expression((body.clientHeight-300)/2); width:620px; height:400px;z-index:2; visibility:hidden} #mask{ position:absolute; top:0; left:0; width:expression(body.scrollWidth); height:expression(body.scrollHeight); background:#000000; filter:ALPHA(opacity=65); z-index:1; visibility:hidden; margin:auto} .massage{width:100%; height:100%; color:#036; font-size:12px; line-height:150%}
</style>
<script language="javascript">
var Obj=''
document.onmouseup=MUp
document.onmousemove=MMove
function MDown(Object){
Obj=Object.id
document.all(Obj).setCapture()
pX=event.x-document.all(Obj).style.pixelLeft;
pY=event.y-document.all(Obj).style.pixelTop;
}
function MMove(){
if(Obj!=''){
document.all(Obj).style.left=event.x-pX;
document.all(Obj).style.top=event.y-pY;
}
}
function MUp(){
if(Obj!=''){
document.all(Obj).releaseCapture();
Obj='';
}
}
function sc1(){
document.getElementById("massage_box").style.top=document.body.scrollTop+(document.body.clientHeight-document.getElementById("massage_box").offsetHeight)/2
document.getElementById("massage_box").style.left=document.body.scrollLeft+(document.body.clientWidth-document.getElementById("massage_box").offsetWidth)/2;
}
function scall(){
sc1();
}
window.onscroll=scall;
window.onresize=scall;
window.onload=scall; </SCRIPT>
<body>
<div id="massage_box">
<div class="massage">
<table width="200" border="0" align="center">
<tr>
<td><img src="http://www.phpsoso.com/images/sosobi.gif" style="border:6px solid #FFFFFF"></td>
</tr>
<tr>
<td height="40" align="center"><span onClick="massage_box.style.visibility='hidden'; mask.style.visibility='hidden'" style="cursor:pointer; color:#FFFFFF">[关闭]</span></td>
</tr>
</table>
</div> </div> <div id="mask"></div>
<table width="536" height="264" border="1" align="center">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="center"><span onClick="massage_box.style.visibility='visible'; mask.style.visibility='visible'" style="cursor:pointer;">[打开]</span></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr> </table>
<% for i=1 to 50 '网页加长
response.Write("</br>")
next %>
</body>
#massage_box{ position:absolute; left:expression((body.clientWidth-massage_box.offsetWidth)/2); top:expression((body.clientHeight-300)/2); width:620px; height:400px;z-index:2; visibility:hidden} #mask{ position:absolute; top:0; left:0; width:expression(body.scrollWidth); height:expression(body.scrollHeight); background:#000000; filter:ALPHA(opacity=65); z-index:1; visibility:hidden; margin:auto} .massage{width:100%; height:100%; color:#036; font-size:12px; line-height:150%}
</style>
<script language="javascript">
var Obj=''
document.onmouseup=MUp
document.onmousemove=MMove
function MDown(Object){
Obj=Object.id
document.all(Obj).setCapture()
pX=event.x-document.all(Obj).style.pixelLeft;
pY=event.y-document.all(Obj).style.pixelTop;
}
function MMove(){
if(Obj!=''){
document.all(Obj).style.left=event.x-pX;
document.all(Obj).style.top=event.y-pY;
}
}
function MUp(){
if(Obj!=''){
document.all(Obj).releaseCapture();
Obj='';
}
}
function sc1(){
document.getElementById("massage_box").style.top=document.body.scrollTop+(document.body.clientHeight-document.getElementById("massage_box").offsetHeight)/2
document.getElementById("massage_box").style.left=document.body.scrollLeft+(document.body.clientWidth-document.getElementById("massage_box").offsetWidth)/2;
}
function scall(){
sc1();
}
window.onscroll=scall;
window.onresize=scall;
window.onload=scall; </SCRIPT>
<body>
<div id="massage_box">
<div class="massage">
<table width="200" border="0" align="center">
<tr>
<td><img src="http://www.phpsoso.com/images/sosobi.gif" style="border:6px solid #FFFFFF"></td>
</tr>
<tr>
<td height="40" align="center"><span onClick="massage_box.style.visibility='hidden'; mask.style.visibility='hidden'" style="cursor:pointer; color:#FFFFFF">[关闭]</span></td>
</tr>
</table>
</div> </div> <div id="mask"></div>
<table width="536" height="264" border="1" align="center">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="center"><span onClick="massage_box.style.visibility='visible'; mask.style.visibility='visible'" style="cursor:pointer;">[打开]</span></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr> </table>
<% for i=1 to 50 '网页加长
response.Write("</br>")
next %>
</body>
更多相关文章请关注PHP中文网（www.php.cn）！
上一篇： 一个高效的分页存储过程