网站首页 手机版
 注册 登录
您现在的位置: 畅无忧设计 >> 网页特效 >> 页面窗口 >> 正文
最新文章
· 网页窗口拖拽(改变大小/最小化/最大
· 带动画效果的网页右侧伸缩窗口
· 左右拖动改变内容显示区域的大小
· 类似QQ对话框上下部分可拖动代码
· jQuery 内容左右切换效果
· 按分辨率导航相应页面
· 分享一款自制的网页滚动条样式
· ModelDialog 可拖拽的JS模态对话框
· 根据div高度判断分页的代码
· 按下键盘上的按键显示在网页空白处
热门文章
 jQuery 内容左右切换效果
 左右拖动改变内容显示区域的大小
 根据div高度判断分页的代码
 可最小化和关闭的右下角浮动窗口
 超漂亮提取自ZCMS弹出框效果v2.1
 jQuery通用的dialog/popup窗口插件
 Js智能判断浏览器是关闭还是刷新
 网页窗口拖拽(改变大小/最小化/最
 让父页面变暗并不可操作的弹出层提
 多个层的显示隐藏+拖动效果
相关文章
没有相关文章
改善用户体验之alert提示效果
来源:轩魂国度 更新时间:2009/5/13 10:17:22 阅读次数: 我要投稿
△运行 ☉预览 #复制 +收藏
特效代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
 <head>
  <meta name="verify-v1" content="P4T6fFCiPVxqMWZ2eztyXVzMHlnwD0wLQOq6LBHN5Y8=" />
  <title>改善用户体验之alert提示效果</title>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <meta http-equiv="Content-Language" content="gb2312" />
  <style type="text/css">
      *{
          margin:0;padding:0;
      }
  </style>
 </head>
 <body>
 

 <div class="cecmbody" id="cecmpolicy">
  <div class="leftClass">
            
<p>测试</p><p>测试</p>
   <p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p>
   <p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p>

   <input type="button" value="点击这里" onclick="sAlert('测试效果');" />
  

  </div>
  <div class="rightClass">
  </div> 
 </div>
    <script type="text/javascript" language="javascript">

//Author:Daviv
//Blog:http://blog.163.com/jxdawei
//Date:2006-10-27
//Email:jxdawei@gmail.com

   function sAlert(str){
   var msgw,msgh,bordercolor;
   msgw=400;//提示窗口的宽度
   msgh=100;//提示窗口的高度
   titleheight=25 //提示窗口标题高度
   bordercolor="#336699";//提示窗口的边框颜色
   titlecolor="#99CCFF";//提示窗口的标题颜色
   
   var sWidth,sHeight;
   sWidth=document.body.offsetWidth;
   sHeight=screen.height;

   var bgObj=document.createElement("div");
   bgObj.setAttribute('id','bgDiv');
   bgObj.style.position="absolute";
   bgObj.style.top="0";
   bgObj.style.background="#777";
   bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
   bgObj.style.opacity="0.6";
   bgObj.style.left="0";
   bgObj.style.width=sWidth + "px";
   bgObj.style.height=sHeight + "px";
   bgObj.style.zIndex = "10000";
   document.body.appendChild(bgObj);
   
   var msgObj=document.createElement("div")
   msgObj.setAttribute("id","msgDiv");
   msgObj.setAttribute("align","center");
   msgObj.style.background="white";
   msgObj.style.border="1px solid " + bordercolor;
      msgObj.style.position = "absolute";
            msgObj.style.left = "50%";
            msgObj.style.top = "50%";
            msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
            msgObj.style.marginLeft = "-225px" ;
            msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
            msgObj.style.width = msgw + "px";
            msgObj.style.height =msgh + "px";
            msgObj.style.textAlign = "center";
            msgObj.style.lineHeight ="25px";
            msgObj.style.zIndex = "10001";
   
     var title=document.createElement("h4");
     title.setAttribute("id","msgTitle");
     title.setAttribute("align","right");
     title.style.margin="0";
     title.style.padding="3px";
     title.style.background=bordercolor;
     title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
     title.style.opacity="0.75";
     title.style.border="1px solid " + bordercolor;
     title.style.height="18px";
     title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
     title.style.color="white";
     title.style.cursor="pointer";
     title.innerHTML="关闭";
     title.onclick=function(){
          document.body.removeChild(bgObj);
                document.getElementById("msgDiv").removeChild(title);
                document.body.removeChild(msgObj);
                }
     document.body.appendChild(msgObj);
     document.getElementById("msgDiv").appendChild(title);
     var txt=document.createElement("p");
     txt.style.margin="1em 0"
     txt.setAttribute("id","msgTxt");
     txt.innerHTML=str;
           document.getElementById("msgDiv").appendChild(txt);
            }
  </script>
 </body>
</html>

△运行 ☉预览 #复制 +收藏
特效说明:
改善用户体验之alert提示效果
  • 上一篇文章:
  • 下一篇文章:
  • 关于我们 - 联系我们 - 广告服务 - 在线投稿 - 友情链接 - 网站地图 - 版权声明
    CopyRight 2008-2010, CWYDESIGN.COM - 畅无忧设计, Inc. All Rights Reserved
    滇ICP备09005765号