• ----:)欢迎访问源码网(:----
    • 首页
    • 博客
    • 学院
    • 下载
    • 论坛
    • 影视
    • 发布源码
    • RSS
    • ITPig
    • 笑话网
    • 百家姓
    • 繁體中文

源码网 - 中国第一源码门户
选择镜像:网通镜像 - 电信主站
  • 首 页
  • 新闻动态
  • 网站运营
  • 网页制作
  • WEB开发
  • 编程开发
  • 图像媒体
  • 操作系统
  • 数据库
  • 服务器
热门搜索 优化 SEO 故事 cms IIS7 MySQL 个人 AdSense 主题推广 | 文章搜索: 高级搜索
会员登录/控制面版您的位置: 学院首页 >> 网页制作 >> HTML学习 >> 详细内容
 

推荐文章

 
 

热点文章

  • 页面跳转代码
  • 符合XHTML标准的漂浮广告代码(浮动广告代码)
  • 网页自动刷新代码
  • 超简单的相册视频程序发布!只要是空间都能用
  • 修改IE浏览器滚动条样式的一个实例
  • 深入浅出 HTML制作网页体验其中乐趣
  • 小技巧:网页自动转向代码
  • 也谈谈DIV+CSS的牛角尖
  • HTML教程:网页刷新方法集合
  • 驳《也谈谈DIV+CSS的牛角尖》
  • innerHTML在Firefox和Opera下的执行特例
  • 对Web页面元素的绝对唯一引用方法
 
 

相关文章

  • 中国网站用户体验排行榜
  • 一叶千鸟:用户体验的误解
  • 用户体验细说:用户和你想的不一样
  • 基于用户体验的搜索引擎优化
  • 专业+互动+用户体验+亮点=盈利
  • 有内容的网站创建良好的用户体验
  • 忘了百度 才能做出用户体验最好的网站
  • CMS中深入融合ajax技术增强用户体验
  • 用户体验:卓越第二,当当第五
  • SEO结合用户体验才是真理
  • 阿里巴巴用户体验:html结构
  • 《用户体验的要素》读书笔记
 
 

百度搜索

 
 

改善用户体验的alert提示效果

  • 阅览次数:
  • 文章来源: CP整理
  • 原文作者: 不详
  • 整理日期: 2007-04-17
  • 发表评论
  • 字体大小:
  • 小
  • 中
  • 大

今天在经典看到有人把这效果独立出来了

http://bbs.blueidea.com/thread-2688074-1-1.html

如同Lightbox的效果那边,或者说和Windows关闭系统前的那一刻类似,为突出显示主题而采取的暗淡背景的方法在Web2.0的站点风格中被越来越多的使用。

(关于Lightbox:http://www.cnbruce.com/blog/showlog.asp?cat_id=34&log_id=1005 )

现在,当弹出千篇一律的Alert警告框被这样的一种方式取代时,给人的感觉是相当的新鲜的。

这样

<input type="button" value="点击这里" onclick="sAlert('测试效果<br>还可以直接书写HTML代码 <br>&copy; 2006');" />

<script type="text/javascript" language="javascript">
//Author:Daviv
//Blog:http://blog.163.com/jxdawei
//Date:2006-10-28
//Email:jxdawei@gmail.com
            function sAlert(str){
            var msgw,msgh,bordercolor;
            msgw=400;//提示窗口的宽度
            msgh=100;//提示窗口的高度
            bordercolor="#336699";//提示窗口的边框颜色
            titlecolor="#99CCFF";//提示窗口的标题颜色
           
            var sWidth,sHeight;
            sWidth=document.body.offsetWidth;
            sHeight=document.body.offsetHeight;
           

            var bgObj=document.createElement("div");
            bgObj.setAttribute('id','bgDiv');
            bgObj.style.position="absolute";
            bgObj.style.top="0";
            bgObj.style.background="#777";
            bgObj.style.filter="progidXImageTransform.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";
            document.body.appendChild(bgObj);
            var msgObj=document.createElement("div")
            msgObj.setAttribute("id","msgDiv");
            msgObj.setAttribute("align","center");
            msgObj.style.position="absolute";
            msgObj.style.background="white";
            msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
            msgObj.style.border="1px solid " + bordercolor;
            msgObj.style.width=msgw + "px";
            msgObj.style.height=msgh + "px";
          msgObj.style.top=(document.documentElement.scrollTop + (sHeight-msgh)/2) + "px";
          msgObj.style.left=(sWidth-msgw)/2 + "px";
          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;
      doc

把SCRIPT做成一个JS文件就可以了

上一篇:PHP使用zlib扩展实现页面GZIP压缩输出
下一篇:构建支持Master/Slave读写分离的数据库操作类
  • 网友评论:
  • 查看所有评论
  • 我要发表评论
您的网名:
留言主题:
你要发表的内容:

 

关于本站 | 广告联系 | 版权声明 | 网站地图 | 发布软件 | 帮助中心 | 源码论坛

Copyright © 2005-2007 CodePub.Com  程序支持:木翼  滇ICP备05005971号