hiAlert:美化的网页对话框

2011年04月18日 11:14helloweba.com 作者:月光光 标签:对话框  jQuery 

厌烦了IE浏览器的警告窗,伴随着“咚”恐惧的一声,让人感觉好像有一种坏事情即将来临。而如今各浏览器对网页的弹出警告框(alert)、确认对话框(confirm)、输入框(prompt)显示效果不一,本文借助hiAlert插件来为您统一网页的对话框风格。

hiAlert:美化的网页对话框

hiAlert插件是根据 jquery.alerts 改进得来,包括了常用的几种提示框,还提供了渐变提示条效果,弹出网页层效果,它目前兼容各主流浏览器。

使用方法

hiAlert提供了五种方法可以使用:

1、hiAlert

hiAlert(content,title,callback);

hiAlert方法提供3个参数,content:内容,title:对话框标题,callback:回调函数,若无则不写,如:

hiAlert("欢迎来到helloweba.net","提示");

2、hiConfirm

hiConfirm(content,title,callback);

hiConfirm方法提供3个参数,content:内容,title:对话框标题,callback:回调函数,若无则不写,如:

hiConfirm('你确认此操作吗?','确认框',function(r){
   hiOverAlert('你的反馈是: ' + r);
});

3、hiPrompt

hiPrompt(content,deinput,title,callback);

hiConfirm方法提供4个参数,content:内容,deinput:输入框的默认值,title:对话框标题,callback:回调函数,若无则不写,如:

hiPrompt('请填写:','默认值','输入框',function(r){
	if(r) hiOverAlert('你填入的内容是“' + r+'”');
});

4、hiBox

hiBox(obj,title,w,h,submit,cancel,callback)

hiBox方法提供7个参数,obj: 被指定打开的对象(对象唯一),即对话框中展示的内容关联的对象,title:标题,w:宽度,h:高度,submit:可设置内容中的对象为"submit",如果有callback,点此返回callback行为,cancel:对话框中的取消或关闭按钮对象,callback:回调函数,如:

hiBox('#showbox', '标题',400,'','','.a_close');

5、hiOverAlert

hiOverAlert(content,timeout);

hiOverAlert用来展示信息提示条效果,类似本站文章jNotify:操作结果信息提示条中的效果,它提供了两个参数,content:提示内容,timeout:提示时间,默认为3000,即3秒。如:

hiOverAlert('操作提示条信息',1500);

在使用时一定记得加载jQuery库和hiAlert插件,以及对应的css样式。您也可以修改CSS来进一步美化对话框。此外,如果需要拖动对话框效果,则需要载入jquery.ui.draggable.js,可以到jqueryui.com了解详情。

声明:本文为原创文章,helloweba.net和作者拥有版权,如需转载,请注明来源于helloweba.net并保留原文链接:https://www.helloweba.net/javascript/124.html

14条评论

  • 怎么做点击确定后,跳转到一个页面上?

  • [爱你]

  • 使用jquery-1.9.0.js也可以在它后面加上jquery-migrate-1.1.0.min.js,兼容以前的脚本。

  • 120字评论限制太坑人了!

  • 参考http://stackoverflow.com/questions/14344289/fancybox-doesnt-work-with-jquery-v1-9-0-f-browser-is-undefined-cannot-read

  • 替换为:
    navigator.userAgent.match(/msie/i)

  • 如果使用jquery-1.9.0,需要修改jquery.alert.js中的几处
    a.browser.msie

  • 下载测试了Firefox18和IE8,效果不错。

  • 把它部署到linux系统weblogic下,中间那块就透明了,大小也变了,请问如何解决?

  • 如果页面中有select 框 弹出的框没有覆盖到select框怎么办呢?

  • 看来是我综合代码的时候有问题,我再试试!

  • 补充:IE7提示不可点,在右上角的蓝色叉 可以关闭。

  • 此版本确实好看,但是在IE7下弹出框始终在左下角,怎么解决呢?本机没有IE8,所有没测试。

  • 晕死,下载不了啊