jQuery haiwiMsg 简单弹窗


使用步骤:
一、必须包括样式haiwiMsg.css
二、引用jQuery库和jquery.haiwiMsg.js
三、直接调用函数弹出对话框,函数包含:
(1) 成功提示对话框:$.thSuccess(content);
(2) 警告提示对话框:$.thWarn(content);
(3) 错误提示对话框:$.thError(content);
(4) 文本提示(不包含图标,支持html):$.thInfo(title,content,width,height);
(5) 提示对话框:$.thAlert(title,content,iconClass);
(6) 选择对话框:$.thConfirm(title,content,okCallBack,cancelCallBack);
(7) 自定义弹出对话框:$.haiwiMsg(options);

运行一下

调用方式举例:
(1)操作成功提示

  1. $.thSuccess("操作成功!");

(2)操作警告提示

  1. $.thWarn("操作警告!");

(3)操作出错提示

  1. $.thError("操作出错!");

(4)文本提示框(不包含图标,支持html化的文本)

  1. $.thInfo("对话框使用说明","<div style='font-size: 1.5em;line-height: 30px;padding:10px;'>" +
  2. "一、必须包括样式haiwiMsg.css<br/>" +
  3. "二、引用jquery库和jquery.haiwiMsg.js<br/>" +
  4. "三、直接调用函数弹出对话框,函数包含:<br/>" +
  5. "(1) 成功提示对话框:$.thSuccess(content);<br/>" +
  6. "(2) 警告提示对话框:$.thWarn(content);<br/>" +
  7. "(3) 错误提示对话框:$.thError(content);<br/>" +
  8. "(4) 文本提示(不包含图标,支持html):$.thInfo(title,content,width,height);<br/>" +
  9. "(5) 提示对话框:$.thAlert(title,content,iconClass);<br/>" +
  10. "(6) 选择对话框:$.thConfirm(title,content,okCallBack,cancelCallBack);<br/>" +
  11. "</div>",700,400);

(5)选择对话框

  1. $.thConfirm("此次操作将删除所选择的记录,确认继续?",function(){
  2. $.thSuccess("删除成功!");
  3. });

(6)弹出对话框(可自定义标题和图标)

  1. $.thAlert("操作提示","操作成功!","haiwi-msg-icon6");

(7)自定义弹出对话框

  1. $.haiwiMsg(options);
  2. 参数如下:
  3. var _opt = {
  4. overlay:0.5, //遮罩度
  5. closeClickOverlay:false, //点击遮罩层是否自动关闭
  6. waitSec:5, //倒计时几秒后关闭,等于0秒则默认不关闭
  7. isDrag:true, //是否可拖动
  8. width:300, //弹出框宽度
  9. height:200, //弹出框高度
  10. icon : "", //图标class类,空代表不需要图标
  11. title:"提示", //标题
  12. type:"alert", //弹出框类型,目前支持alert,confirm,info
  13. content:" ", //显示内容,支持html
  14. ok:null, //回调函数,点击确定调用
  15. cancel:null //回调函数,点击取消调用
  16. };

下载地址