弹框提示

最新推荐文章于 2024-08-14 15:45:18 发布

G90322

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量124

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/Wtingting/p/6694998.html

版权

 
  <html xmlns= 
  "http://www.w3.org/1999/xhtml" 
  > 
 
  <head> 
 
  <meta http-equiv= 
  "Content-Type"  
  content= 
  "text/html; charset=gb2312"  
  /> 
 
  <title>弹出提示小窗口示例</title> 
 
  <style type= 
  "text/css" 
  > 
 
  * {margin:0px;padding:0px;} 
 
  html,body { height:100%;} 
 
  body { font-size:14px; line-height:24px;} 
 
  #tip { 
 
  position: absolute; 
 
  right: 0px; 
 
  bottom: 0px; 
 
  height: 0px; 
 
  width: 180px; 
 
  border: 1px solid #CCCCCC; 
 
  #eeeeee; 
 
  padding: 1px; 
 
  overflow:hidden; 
 
  display:none; 
 
  font-size:12px; 
 
  z-index:10; 
 
  } 
 
  #tip p { padding:6px;} 
 
  #tip h1,#detail h1 { 
 
  font-size:14px; 
 
  height:25px; 
 
  line-height:25px; 
 
  color:#FFFFFF; 
 
  padding:0px 3px 0px 3px; 
 
  filter: Alpha(Opacity=100); 
 
  } 
 
  #tip h1 a,#detail h1 a { 
 
  float 
  :right; 
 
  text-decoration:none; 
 
  color:#FFFFFF; 
 
  } 
 
  #shadow { 
 
  position:absolute; 
 
  width:100%; 
 
  height:100%; 
 
  z-index:11; 
 
  filter: Alpha(Opacity=70); 
 
  display:none; 
 
  overflow:hidden; 
 
  } 
 
  #detail { 
 
  width:500px; 
 
  height:200px; 
 
  border:3px  
  double  
  #ccc; 
 
  position:absolute; 
 
  z-index:30; 
 
  display:none; 
 
  left:30%; 
 
  top:30% 
 
  } 
 
  </style> 
 
  <script type= 
  "text/javascript" 
  > 
 
  var handle; 
 
  function start() 
 
  { 
 
  var obj = document.getElementById( 
  "tip" 
  ); 
 
  if  
  (parseInt(obj.style.height)==0) 
 
  { obj.style.display= 
  "block" 
  ; 
 
  handle = setInterval( 
  "changeH('up')" 
  ,2); 
 
  } 
  else 
 
  { 
 
  handle = setInterval( 
  "changeH('down')" 
  ,2)   
 
  }   
 
  } 
 
  function changeH(str) 
 
  { 
 
  var obj = document.getElementById( 
  "tip" 
  ); 
 
  if 
  (str== 
  "up" 
  ) 
 
  { 
 
  if  
  (parseInt(obj.style.height)>200) 
 
  clearInterval(handle); 
 
  else 
 
  obj.style.height=(parseInt(obj.style.height)+8).toString()+ 
  "px" 
  ; 
 
  } 
 
  if 
  (str== 
  "down" 
  ) 
 
  { 
 
  if  
  (parseInt(obj.style.height)<8) 
 
  { clearInterval(handle); 
 
  obj.style.display= 
  "none" 
  ; 
 
  } 
 
  else    
 
  obj.style.height=(parseInt(obj.style.height)-8).toString()+ 
  "px" 
  ;   
 
  } 
 
  } 
 
  function showwin() 
 
  { 
 
  document.getElementsByTagName( 
  "html" 
  )[0].style.overflow =  
  "hidden" 
  ; 
 
  start(); 
 
  document.getElementById( 
  "shadow" 
  ).style.display= 
  "block" 
  ; 
 
  document.getElementById( 
  "detail" 
  ).style.display= 
  "block" 
  ;   
 
  } 
 
  function recover() 
 
  { 
 
  document.getElementsByTagName( 
  "html" 
  )[0].style.overflow =  
  "auto" 
  ; 
 
  document.getElementById( 
  "shadow" 
  ).style.display= 
  "none" 
  ; 
 
  document.getElementById( 
  "detail" 
  ).style.display= 
  "none" 
  ;    
 
  } 
 
  </script> 
 
  </head> 
 
  <body onload= 
  "document.getElementById('tip').style.height='0px'" 
  > 
 
  <div id= 
  "shadow" 
  > </div> 
 
  <div id= 
  "detail" 
  > 
 
  </div> 
 
  <div id= 
  "tip" 
  ><h1><a href= 
  "javascript:void(0)"  
  onclick= 
  "start()" 
  >×</a>消息提示</h1><p><a href= 
  "javascript:void(0)"  
  onclick= 
  "showwin()" 
  >查看详细</a></p></div> 
 
  <p><a href= 
  "#"  
  onclick= 
  "start()" 
  >点击查看未处理信息</a><br><br><br><br> 
 
  </body> 
 
  </html>

转载于:https://www.cnblogs.com/Wtingting/p/6694998.html

G90322

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
弹框提示

<htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>弹出提示小窗口示例</title><styletype...
复制链接

扫一扫