jquery插件封装:消息对话框

  封装了一个消息对话框,用于替换浏览器原生的alert和confirm,兼容浏览器差异,同时支持良好的扩展性。效果图见下方调用方式举例:
  
使用步骤:
一、必须包括样式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)操作成功提示

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

这里写图片描述

(2)操作警告提示

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

这里写图片描述

(3)操作出错提示

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

这里写图片描述

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

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

这里写图片描述

(5)选择对话框

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

这里写图片描述

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

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

这里写图片描述

(7)自定义弹出对话框

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

点击查看源码:源码

软件功能: * 无限级弹出窗口 * Esc退出block弹出窗口 * 可拖动窗口 * 模态窗口 * 模态alert警告对话框 * 模态confirm对话框 * 页面局部模态 * 绑定按钮响应函数 * 弹出窗口加载iframe * 自定义背景样式 组件提供了六个函数: $.funkyUI // 弹出模态窗口 $.unfunkyUI // 关闭模态窗口 $.alert //警告提示对话框 $.confirm //确认和取消对话框 $.fn.block //块模态 $.fn.unblock//解除块模态 调用示例: $.blockUI({ url:"1.html",//弹出窗口显示的内容,使用iframe OKEvent:okEvent,//okEvent是自定义的确定按钮响应函数, css:{width:"700",height:"500"} }); $.alert("这是警告窗口"); $.confirm("这是个Boolean窗口"); $('#blocked').block();//id为blocked的元素设置为只读 $('#blocked').unblock();//解除 实现的思路: 我在主窗体中创建一个层,用来作为弹出窗体,包含一个iframe,通过参数指定URL,作为显示的内容,我觉得可能会有利于代码的重用,代码管理起来要方便一些 弹出窗口中含有的弹出窗口也在主窗体中创建,这样结构简单一点,比较容易管理。我在创建弹出窗口的时候在主窗体中声明一个栈,把当前iframe的window对象压入栈,这样不管我现在弹出了多少个窗口总能很容易的找到其中的任意一个的对象。 有感兴趣的把我的代码下载回去看看,然后给我提提意见,帮我提高。。。 觉得可用的随便用,有不明白的问我
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值