弹出层,并且始终在屏幕右下角显示。

 

<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script type="text/javascript">
window.onload = getMsg;
window.onresize = resizeDiv;

var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,objTimer,i = 0;
function getMsg()
{
 try
 {
  divTop = parseInt(document.getElementById("editordiv2").style.top,10);
  divLeft = parseInt(document.getElementById("editordiv2").style.left,10);
  divHeight = parseInt(document.getElementById("editordiv2").offsetHeight,10);
  divWidth = parseInt(document.getElementById("editordiv2").offsetWidth,10);
 
  docWidth = document.body.clientWidth;
  docHeight = document.body.clientHeight;
  document.getElementById("editordiv2").style.top = parseInt(document.body.scrollTop,10) + docHeight + 10;// divHeight
  document.getElementById("editordiv2").style.left = parseInt(document.body.scrollLeft,10) + docWidth - divWidth;
  document.getElementById("editordiv2").style.visibility="visible"
  window.clearInterval(objTimer);
  objTimer = window.setInterval("moveDiv()",10)
 }
 catch(e){}
}
function resizeDiv()
{
 try
 {
 divHeight = parseInt(document.getElementById("editordiv2").offsetHeight,10);
 divWidth = parseInt(document.getElementById("editordiv2").offsetWidth,10);
 docWidth = document.body.clientWidth;
 docHeight = document.body.clientHeight;
 document.getElementById("editordiv2").style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10);
 document.getElementById("editordiv2").style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10);
 }
 catch(e){}
}

function resizeDivMin()
{
 try
 {
 divHeight = parseInt(document.getElementById("editordiv2").offsetHeight,10);
 divWidth = parseInt(document.getElementById("editordiv2").offsetWidth,10);
 docWidth = document.body.clientWidth;
 docHeight = document.body.clientHeight;
 
 document.getElementById("editordiv2").style.top = docHeight - 25 + parseInt(document.body.scrollTop,10);
 document.getElementById("editordiv2").style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10);
 }
 catch(e){}
}

function moveDiv()
{
 try
 {
  if(parseInt(document.getElementById("editordiv2").style.top,10) <= (docHeight - divHeight + parseInt(document.body.scrollTop,10)))
  {
  window.clearInterval(objTimer);
  objTimer = window.setInterval("resizeDiv()",10);
  document.getElementById("close").style.display="block";
   document.getElementById("max").style.display="none";
  }
  divTop = parseInt(document.getElementById("editordiv2").style.top,10)
  document.getElementById("editordiv2").style.top = divTop - 8;
 }
 catch(e){}
}

function moveDivMin()
{
 try
 {
  if(parseInt(document.getElementById("editordiv2").style.top,10) >= (docHeight- 42 + parseInt(document.body.scrollTop,10)))
  {
   window.clearInterval(objTimer);
   objTimer = window.setInterval("resizeDivMin()",1)
   document.getElementById("close").style.display="none";
   document.getElementById("max").style.display="block";
  }
  divTop = parseInt(document.getElementById("editordiv2").style.top,10)
  document.getElementById("editordiv2").style.top = divTop + 8;
 }
 catch(e){}
}

function closeDiv()
{
 window.clearInterval(objTimer);
 objTimer = window.setInterval("moveDivMin()",10);
}
</script>
 </HEAD>

 <BODY>
 <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/><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/><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/>
   <div id="editordiv2" style="z-index:9000;display:block;padding: 0px;POSITION: absolute;top:0px;left:0px;BORDER: #455690 1px solid;" >
   <TABLE style="BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid" cellSpacing=0 cellPadding=0 width="320px" bgColor=#AFDCF3 border=0>
  <TBODY>
   <TR bgColor="#6699cc">
    <TD
     style="font-size: 12px; color: #0f2c8c"
     width=30 height=24></TD>
    <TD
     style="font-weight: normal; font-size: 12px; background-image: url('msgTopBg.gif'); color: #ffffff; padding-left: 4px; padding-top: 4px"
     vAlign=center width="100%">弹出层:
    </TD>
    <TD
     style="background-image: url('msgTopBg.gif'); padding-right: 2px; padding-top: 2px"
     vAlign=center align=right width=19>
     <span id="max" title="max" style="CURSOR: hand;color:white;font-size:12px;font-weight:bold;margin-right:4px;display:none;" onclick="getMsg()">口</span>
     <span id="close" title="close"
      style="CURSOR: hand;color:white;font-size:12px;font-weight:bold;margin-right:4px;"
      onclick="closeDiv()">X</span>
     <!--<IMG title=关闭 style="CURSOR: hand" onclick=closeDiv() hspace=3 src="msgClose.jpg">-->
    </TD>
   </TR>
  </TBODY>
 </TABLE>
 <table height="200px">
 <tr>
 <td>
 123456
 </td>
 </tr>
 </table>
 
   </div>
 </BODY>
</HTML>

猜你喜欢

转载自blog.csdn.net/jlsdzhj/article/details/6619771