页面导航：首页 → 网络编程 → JavaScript → 网页特效 → 页面背景 → 正文内容弹出提示

弹出提示的效果代码

发布：dxy 字体：[增加减小] 类型：转载

脚本之家模拟弹出提示效果代码

点击运行可以看到效果:

<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>脚本之家---模拟弹出提示 脚本之家</title>  
</head>

<body>  
<script language=javascript>  
var cao_x,cao_y;

function cao888()   
{  
this.display=display;   
}

function display()   
{  
  document.write("<table align=center><tr><td><button style='width:100px;height:30px;font-size:12px;border:1px solid #A4B3C8;background-color:green;' type=button onclick=document.getElementById('cao1').style.display='block' onfocus=this.blur()>脚本之家留言</button></td></tr></table>");  
  document.write("<div  id='cao1' style='font-size:12px;position:absolute;display:none;text-align:center;overflow:visible'>");  
  document.write("<div style='position:absolute;top:expression((body.clientHeight-300)/2);left:expression((body.clientWidth-200)/2);width:200px;height:180px;background-color:#dbdbdb;border:1px solid #cccccc;'>");  
  document.write("<table width=200 height=20 bgcolor=green onmousedown='cao_x=event.x-parentNode.style.pixelLeft;cao_y=event.y-parentNode.style.pixelTop;setCapture();' onmouseup='releaseCapture();' onmousemove='caoMove(this.parentNode)' style='cursor:move;'>");  
  document.write("<tr align=center>");  
  document.write("<td align=left>脚本之家</td>");  
  document.write("</tr>");  
  document.write("</table>");  
  document.write("<span style= cursor:hand onclick=this.parentNode.parentNode.style.display='none';>欢迎光临脚本之家[确定]</span>");  
  document.write("  </div>");  
  document.write("</div>");  
}  
function caoMove(obj)  //实现层的拖移  
{  
  if(event.button==1)  
  {  
    var caoX=obj.clientLeft;  
    var caoY=obj.clientTop;  
    obj.style.pixelLeft=caoX+(event.x-cao_x);  
    obj.style.pixelTop=caoY+(event.y-cao_y);  
  }  
}  
</script>  
<script language=javascript>  
var mycao=new cao888();  
mycao.display();  
</script>  
</body>  
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：弹出提示

浏览次数：载入中... 打印本文关闭本文返回首页

0

上一篇文章：javascript用层模拟可移动的小窗口
下一篇文章：直接生成打开窗口代码，不必下载

·在百度中搜索关于“弹出提示的效果代码”相关内容
·在谷歌中搜索关于“弹出提示的效果代码”相关内容

文章评论

共有位脚本之家网友发表了评论我来说两句

同类文章

最近更新

热点排行