This article describes the method of implementing JavaScript to open a translucent prompt layer. Share it for your reference. The details are as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOMTranslucent tip layer</title>
<style type="text/css">
body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;}
#bodyL{
float:left;
width:84px;
margin-right:2px;
}
{
width:80px;
height:25px;
line-height:25px;
text-align:center;
font-weight:bold;
border: 2px solid #849BCA;
display:block;
color:#547BC9;
float:left;
text-decoration:none;
margin-top:2px;
}
:link{
background:#EEF1F8;
}
:visited{
background:#EEF1F8;
}
:hover{
background:#EEE;
}
:active{
background:#EEE;
}
#fd{
width:500px;
height:200px;
background:#EDF1F8;
border: 2px solid #849BCA;
margin-top:2px;
margin-left:2px;
float:left;
overflow:hidden;
position:absolute;
left:0px;
top:0px;
cursor:move;
float:left;
}
.content{
padding:10px;
}
</style>
</head>
<body>
<div >
<a href="#" class="od" onclick = "show('fd');return false;">
[Open the layer]
</a>
<a href="#" class="od" onclick = "closeed('fd');return false;">
[Close the layer]
</a>
</div>
<div style="display:none;filter:alpha(opacity=100);opacity:1;">
<div class="content">Mobile layer</div>
</div>
<script type="text/javascript">
var prox;
var proy;
var proxc;
var proyc;
function show(id){/*--Open--*/
clearInterval(prox);
clearInterval(proy);
clearInterval(proxc);
clearInterval(proyc);
var o = (id);
= "block";
= "1px";
= "1px";
prox = setInterval(function(){openx(o,500)},10);
}
function openx(o,x){/*--Open x--*/
var cx = parseInt();
if(cx < x)
{
= (cx + ((x-cx)/5)) +"px";
}
else
{
clearInterval(prox);
proy = setInterval(function(){openy(o,200)},10);
}
}
function openy(o,y){/*--Open y--*/
var cy = parseInt();
if(cy < y)
{
= (cy + ((y-cy)/5)) +"px";
}
else
{
clearInterval(proy);
}
}
function closeed(id){/*--closure--*/
clearInterval(prox);
clearInterval(proy);
clearInterval(proxc);
clearInterval(proyc);
var o = (id);
if( == "block")
{
proyc = setInterval(function(){closey(o)},10);
}
}
function closey(o){/*--Open y--*/
var cy = parseInt();
if(cy > 0)
{
= (cy - (cy/5)) +"px";
}
else
{
clearInterval(proyc);
proxc = setInterval(function(){closex(o)},10);
}
}
function closex(o){/*--Open x--*/
var cx = parseInt();
if(cx > 0)
{
= (cx - (cx/5)) +"px";
}
else
{
clearInterval(proxc);
= "none";
}
}
/*Drag the mouse*/
var od = ("fd");
var dx,dy,mx,my,mouseD;
var odrag;
var isIE = ? true : false;
= function(e){
var e = e ? e : event;
if( == ( ? 1 : 0))
{
mouseD = true;
}
}
= function(){
mouseD = false;
odrag = "";
if(isIE)
{
();
= 100;
}
else
{
();
= 1;
}
}
//function readyMove(e){
= function(e){
odrag = this;
var e = e ? e : event;
if( == ( ? 1 : 0))
{
mx = ;
my = ;
= + "px";
= + "px";
if(isIE)
{
();
= 50;
}
else
{
();
= 0.5;
}
//alert(mx);
//alert(my);
}
}
= function(e){
var e = e ? e : event;
//alert(mrx);
//alert();
if(mouseD==true && odrag)
{
var mrx = - mx;
var mry = - my;
= parseInt() +mrx + "px";
= parseInt() + mry + "px";
mx = ;
my = ;
}
}
</script><br/>
<div>https:///</div>
</body>
</html>
I hope this article will be helpful to everyone's JavaScript programming.