jquery插件hiAlert实现网页对话框美化

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

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

使用方法

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

1、hiAlert

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

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

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用来展示信息提示条效果，类似本站文章中的效果，它提供了两个参数，content：提示内容，timeout：提示时间，默认为3000，即3秒。如：

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

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

以上所述就是本文的全部内容了，希望大家能够喜欢。

赞 (0)

相关推荐

  • 强大的jquery插件jqeuryUI做网页对话框效果！简单

    强大的jquery插件jqeuryUI做网页对话框效果！简单

    我们先来最简单的,网页的登录窗口: 不过开始之前,大家先下载jquery的插件本人习惯用了vs2008来做网页了,先添加一个空白页 这是最简单的的做法...先在body里面插入 <body><div id="div1"><table><tr><td>用户名</td><td><input type="text" style="width:100px" />

  • jQuery对话框插件ArtDialog在双击遮罩层时出现关闭现象的解决方法

    本文实例讲述了jQuery对话框插件ArtDialog在双击遮罩层时出现关闭现象的解决方法.分享给大家供大家参考,具体如下: 大家都知道,ArtDialog是一款非常不错的.轻量级的.基于jQuery的对话框插件,深受大家的追捧,大伙可以到一下地址进行下载: https://code.google.com/p/artdialog/ https://github.com/aui/artDialog 截止到2014年9月17日,已经有几个重大的版本v4.1.7.v5.0.4和v6.0.2,其中4.x

  • jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)

    jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)

    功能:zhou en ce同学最近写了个基于jquery的信息弹出插件showInfoDialog,该插件对背景进行遮罩,然后弹出信息显示框,信息显示种类包括: 一.信息种类说明: 1.1.操作成功信息 1.2.错误信息 1.3.警告信息 1.4.通知信息 二.使用说明 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4

  • 学习从实践开始之jQuery插件开发 对话框插件开发

    学习从实践开始之jQuery插件开发 对话框插件开发

    前言: 之所以写下这篇文章,是想将我的想法分享给大家:对于初学者,我希望他能从这篇文章中获取对他有用的东西,对于经验丰富的开发者,我希望他能指出我的不足,给我更多的意见和建议:目的就是共同进步. 一.要做什么插件? 我想要实现一个插件可以取代浏览器默认的弹出对话框或窗体,就是我们通过调用window.alert,window.confirm,window.prompt这些方法 所弹出的网页对话框,通过调用window.open,window.showModalDialog,window.show

  • jQuery validate+artdialog+jquery form实现弹出表单思路详解

    功能描述: 在页面弹出一个form表单,ajax无刷新提交表单,表单需通过验证. 适用范围: 适用于在列表页面新增,修改记录. 需要加载的js文件: jquery.min.js artDialog.js iframeTools.js jquery.form.js jquery.validate.js 实现思路: 在页面中将表单放到一个隐藏的容器中,用artdialog弹出该form并对form加上jqueryvalidate验证,提交采用jqueryform ajax提交,由于都是用现成的插件写

  • 非常强大的 jQuery.AsyncBox 弹出对话框插件

    非常强大的 jQuery.AsyncBox 弹出对话框插件

    复制代码 代码如下: <link href="asyncbox/skins/ZCMS/asyncbox.css" rel="stylesheet" type="text/css" /> <script src="asyncbox/jQuery.v1.4.2.js" type="text/javascript"></script> <script src="

  • jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答

    jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答

    插件说明 - jBox 是一款基于 jQuery 的多功能对话框插件,能够实现网站的整体风格效果,给用户一个新的视觉享受. 运行环境 - 兼容 IE6+.Firefox.Chrome.Safari.Opera 等主流浏览器. 使用授权 - jBox 永久免费使用,但是必须保留相关的版权信息.如果有好的建议,可以直接在下面留言. 版本:2.3 大小:19.8k 下载:点击下载 在线demo:http://www.kudystudio.com/jbox/jbox-demo.html [2011-11

  • 基于jQuery的弹出警告对话框美化插件(警告，确认和提示)

    基于jQuery的弹出警告对话框美化插件(警告，确认和提示)

    前不久在官方网站是看见这个插件,所以今天趁有空就看了一下,随便给大家共享一下.也许你早已知道了 ,如果是这样那请跳过,不要拍砖. 这个Jquery插件的目的是替代JavaScript的标准函数alert(),confirm(),和 prompt().这个插件有 如下这些特点: 1:这个插件可以使你可以支持你自己的css制定.使你的网站看起来更专业. 2:允许你自定义对话框的标题. 3:在IE7中,可以使你避免使用JavaScript 的prompt()函数带来的页面重新加载. 4:这些方法都模拟

  • 分享2个jQuery插件--jquery.fileupload与artdialog

    分享2个jQuery插件--jquery.fileupload与artdialog

    这些是我们项目中必不可少的东西,所以今天推荐两个一个叫做artdialog是个iframe的jquery插件,一个叫jquery file upload,我看网上很少有这个插件jquery file upload的插件使用教程,今天我就简单的介绍和写一点使用的方法! 简单用代码举例子 最小化的方法 复制代码 代码如下: data-url是上传后执行上传文件的php方法 <input id="fileupload" type="file" name="

  • 修改jquery里的dialog对话框插件为框架页(iframe) 的方法

    修改jquery里的dialog对话框插件为框架页(iframe) 的方法

    jquery有个很不错的ui插件,dialog插件,他的官方网站上有各种形式的演示:http://jqueryui.com/demos/dialog/   ,可能大家用得比较多的还是它的默认模式,具体的用法官网上都有,也有中文的讲解地址,我就不再重复了,最近在弄弹出框架页,仔细一看,和dialog插件的modal form 模式很相似,demo演示效果:http://www.lovewebgames.com/addNews.aspx 就是这么个效果,要进行登录注册弹出层,至于为什么我不直接用mo

  • jQuery Dialog 弹出层对话框插件

    原理很简单,通过JS动态构建一个div层,将其插入到body中,然后通过调整position的CSS属性为absolute或fixed,使其脱离原来的文档流的位置.再通过适当的加工美化就成了. 复制代码 代码如下: <!-- 背景遮盖层 --> <div class="dialog-overlay"></div> <!-- 对话框 --> <div class="dialog"> <div class

  • 用jquery中插件dialog实现弹框效果实例代码

    复制代码 代码如下: <!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"> <head> <meta http-equiv=&qu

随机推荐