收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 82773|回复: 92

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

[复制链接]
发表于 2006-10-26 16:40:55 | 显示全部楼层 |阅读模式
类似于新浪邮箱的提示效果。比较独立。在wenming版主的帮助下,已解决了高度不能适应的BUG。

使用方法很简单,在需要弹出提示的页面先
  1. <script type="text/javascript" src="alert.js"></script>
复制代码

然后直接在需要提出处使用:
  1. sAlert("需要提示的信息")
复制代码

即可完成全部效果。不需要在页面中添加任何其它代码。

 提示:您可以先修改部分代码再运行




如果有更好的建议,欢迎给我留言!!!


[[i] 本帖最后由 jxdawei 于 2006-10-27 15:00 编辑 ]

alert.rar

1.17 KB, 下载次数: 1770

alert.js

评分

参与人数 1威望 +2 收起 理由
hutia + 2 原创内容

查看全部评分

发表于 2006-10-26 16:43:51 | 显示全部楼层
不错,支持一下!
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-10-26 16:52:35 | 显示全部楼层

RE

现在主要还存在的问题就是当body.offsetHeight过高或者过小的时候,显示的效果非常不理想.请高手指点.

[[i] 本帖最后由 jxdawei 于 2006-10-26 20:41 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2006-10-26 17:09:16 | 显示全部楼层
一个若隐若现的"X",效果真不错,收藏了
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-10-27 00:14:39 | 显示全部楼层
哪位高手告诉我怎么完善一下高度不居中的BUG.感谢了.

如下边的效果,document.body.offsetHeight太长的时候,提示框的位置差太远了.我看新浪邮箱的不会,苦于没找到它的脚本.请高手指点!!!

 提示:您可以先修改部分代码再运行


[[i] 本帖最后由 jxdawei 于 2006-10-27 00:18 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2006-10-27 01:33:02 | 显示全部楼层
呵呵,今天刚好把我之前弄的拿出来重新搞了一下。
把你的sAlert替换了一下。方法都是差不多的。:)

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2006-10-27 09:13:40 | 显示全部楼层
模拟alert提示效果的代码古已有之,百度一下便可找到。

不过,戴上“改善用户体验”的冠冕的确是相当堂皇。这就是楼主的高明之处了。

[[i] 本帖最后由 bound0 于 2006-11-6 12:43 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2006-10-27 09:17:01 | 显示全部楼层
哈哈哈,好好,收下了!
回复 支持 反对

使用道具 举报

发表于 2006-10-27 09:25:14 | 显示全部楼层
要是能在页面滚动的时候也把提示框随页面滚动就好了。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-10-27 09:26:32 | 显示全部楼层
原帖由 [i]chyf1982 于 2006-10-27 09:25 发表
要是能在页面滚动的时候也把提示框随页面滚动就好了。:D


不要为好,页面提示不同于广告。用户看到之后马上就要把提示关闭掉。然后进行其它的操作的。
回复 支持 反对

使用道具 举报

发表于 2006-10-27 09:28:46 | 显示全部楼层
好东西,收下了!
回复 支持 反对

使用道具 举报

发表于 2006-10-27 09:55:00 | 显示全部楼层
不错的效果,收藏了
回复 支持 反对

使用道具 举报

发表于 2006-10-27 09:56:21 | 显示全部楼层
好东西  收下。。。
回复 支持 反对

使用道具 举报

发表于 2006-10-27 10:01:30 | 显示全部楼层
good! ths!
回复 支持 反对

使用道具 举报

发表于 2006-10-27 10:16:14 | 显示全部楼层
弹出的菜单里面加上提交表单就更好了,我以前弄过不过不兼用其他浏览器啊
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-10-27 10:19:07 | 显示全部楼层
原帖由 [i]hk3000 于 2006-10-27 10:16 发表
弹出的菜单里面加上提交表单就更好了,我以前弄过不过不兼用其他浏览器啊



现在163博客的登录以有Live.com中也用了你说的那种,抽空研究一下:)
回复 支持 反对

使用道具 举报

发表于 2006-10-27 11:00:09 | 显示全部楼层
内容不满一屏时不能全屏遮盖,如何解决?
回复 支持 反对

使用道具 举报

发表于 2006-10-27 11:08:18 | 显示全部楼层
呵呵,楼上的说得对,不足一屏时,就使用 clientHeight 作为高度。下面例子

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-10-27 11:11:35 | 显示全部楼层
原帖由 [i]Hakkawawa 于 2006-10-27 11:00 发表
内容不满一屏时不能全屏遮盖,如何解决?


新的下载里已经修改了不满一屏的显示错误,感谢Hakkawawa提出BUG.
回复 支持 反对

使用道具 举报

发表于 2006-10-27 14:48:20 | 显示全部楼层
//Author:Daviv
//Blog:http://blog.163.com/jxdawei
//Date:2006-10-28
//Email:jxdawei@gmail.com

我转载了,今天上午刚看到的时候,没有版权信息,现在你的版权信息居然到了10月28号,太超前了吧~

另外想请问下楼主,这些JS都是自己原创么?

新的代码对HTML的显示支持不是很好

 提示:您可以先修改部分代码再运行


[[i] 本帖最后由 cnbruce 于 2006-10-27 14:50 编辑 ]
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-10-27 15:02:37 | 显示全部楼层

回复 #20 cnbruce 的帖子

对HTML支持不好的修改方法:


  1. msgObj.style.lineHeight = (msgh-titleheight) + "px";
复制代码

改为

  1. msgObj.style.lineHeight = "25px";
复制代码

感谢cnbruce的提醒!
回复 支持 反对

使用道具 举报

发表于 2006-10-27 15:09:58 | 显示全部楼层
http://jquery.com/demo/thickbox/

建议你来翻译下
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-10-27 15:28:21 | 显示全部楼层

老外的,看不懂.
回复 支持 反对

使用道具 举报

发表于 2006-10-27 15:32:28 | 显示全部楼层
原帖由 [i]cnbruce 于 2006-10-27 15:09 发表
http://jquery.com/demo/thickbox/

建议你来翻译下 :p


thickbox 与这个有一些类似哦
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-10-27 15:42:39 | 显示全部楼层
网上类似这样的效果的地方太多了.我也是看了类似的网站才去写的这段脚本.本人英语比较差.哈哈.
回复 支持 反对

使用道具 举报

发表于 2006-10-27 16:35:41 | 显示全部楼层
真的不错啊。。。。收下
回复 支持 反对

使用道具 举报

发表于 2006-10-28 03:49:32 | 显示全部楼层
当alert出现的时候没有必要上下滚动页面呀。而且效果也不好。。。。
另:改变页面大小也会有bug
我以前写的一个可以给楼主参考一下

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

[[i] 本帖最后由 luciferzzn 于 2006-10-28 03:52 编辑 ]
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-10-28 09:01:21 | 显示全部楼层

回复 #27 luciferzzn 的帖子

你说的二个BUG新浪邮箱刚好都有.
有空来完善一下,谢谢luciferzzn
回复 支持 反对

使用道具 举报

发表于 2006-10-29 11:34:36 | 显示全部楼层

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2006-10-29 11:37:55 | 显示全部楼层

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-7-23 12:04 , Processed in 0.124686 second(s), 15 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表