⭐ 欢迎来到虫虫下载站! | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站

📄 htmlpage3.htm

📁 使用js控制弹出div层
💻 HTM
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>提示信息框</title>
<style type="text/css">
a {
color: #000;
font-size: 12px;
text-decoration: none;
}
a:hover {
color: #900;
text-decoration: underline;
}
body {
background: ;
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#003366);
overflow: hidden;
}
#massage_box {
position: absolute;
left: expression((body.clientWidth-350)/2);
top: expression((body.clientHeight-200)/2);
width: 350px;
height: 200px;
filter: dropshadow(color=#666666,offx=3,offy=3,positive=2);
z-index: 2;
visibility: hidden;
}
#mask {
position: absolute;
top: 0;
left: 0;
width: expression(body.scrollWidth);
height: expression(body.scrollHeight);
background: #666;
filter: ALPHA(opacity=60);
z-index: 1;
visibility: hidden;
}
.massage {
border: #036 solid;
border-width: 1 1 3 1;
width: 95%;
height: 95%;
background: #fff;
color: #036;
font-size: 12px;
line-height: 150%;
}
.header {
background: #036;
height: 10%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 3 5 0 5;
color: #fff;
}
</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=''; 
} 
} 
</script>
</head>

<body>

<div id="massage_box">
<div class="massage">
   <div class="header" onmousedown="MDown(massage_box)">
    <div style="display: inline; width: 150px; position: absolute">
     本站提示信息 </div>
    <span onclick="massage_box.style.visibility='hidden'; mask.style.visibility='hidden'" style="float: right; display: inline; cursor: hand">× </span></div>
   <ul style="margin-right: 25">
    <li>你的要放的代码 </li>
    <input type="text" > <br >
    <input type="button" value="这是按扭" > </li>
    <li></li>
    <li></li>
   </ul>
</div>
</div>
<div id="mask">
</div>
<span onclick="mask.style.visibility='visible';massage_box.style.visibility='visible'" style="cursor: hand">
<a href="#">显示提示信息 </a></span><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
bottom here

</body>

</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -