alert-confirm弹出框插件

某个没用过的但是很简洁的弹出框插件:  http://www.jq22.com/jquery-info2351

一、自己创建js文件并粘贴进去

;$(function () {
    window.Modal = function () {
        var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
        var alr = $("#ycf-alert");
        var ahtml = alr.html();

        //关闭时恢复 modal html 原样,供下次调用时 replace 用
        //var _init = function () {
        //  alr.on("hidden.bs.modal", function (e) {
        //      $(this).html(ahtml);
        //  });
        //}();

        /* html 复原不在 _init() 里面做了,重复调用时会有问题,直接在 _alert/_confirm 里面做 */


        var _alert = function (options) {
            alr.html(ahtml);    // 复原
            alr.find('.ok').removeClass('btn-success').addClass('btn-primary');
            alr.find('.cancel').hide();
            _dialog(options);

            return {
                on: function (callback) {
                    if (callback && callback instanceof Function) {
                        alr.find('.ok').click(function () { callback(true) });
                    }
                }
            };
        };

        var _confirm = function (options) {
            alr.html(ahtml); // 复原
            alr.find('.ok').removeClass('btn-success').addClass('btn-primary');
            alr.find('.cancel').show();
            _dialog(options);

            return {
                on: function (callback) {
                    if (callback && callback instanceof Function) {
                        alr.find('.ok').click(function () { callback(true) });
                        alr.find('.cancel').click(function () { callback(false) });
                    }
                }
            };
        };

        var _dialog = function (options) {
            var ops = {
                msg: "提示内容",
                title: "操作提示",
                btnok: "确定",
                btncl: "取消"
            };

            $.extend(ops, options);

            console.log(alr);

            var html = alr.html().replace(reg, function (node, key) {
                return {
                    Title: ops.title,
                    Message: ops.msg,
                    BtnOk: ops.btnok,
                    BtnCancel: ops.btncl
                }[key];
            });

            alr.html(html);
            alr.modal({
                width: 500,
                backdrop: 'static'
            });
        }

        return {
            alert: _alert,
            confirm: _confirm
        }

    }();
});

二、使用方法
1. 直接弹出确定的提示框
Modal.alert({msg:"请求成功"});
如果需传入数据
Modal.alert({msg:data.message});//data.message是后端传来的参数
2.弹出询问框,是否要进行某项操作吗?

Modal.confirm(
    {
        msg: "确定要删除角色吗?"
    }).on( function (e) {
        if(e) {
            $.ajax({   //点击确定按钮,执行ajax请求
                    type: 'POST',
                    data: {id: id},
                    url: yy_context + '/ou/userRole/deleteRoleById.do',
                    dataType: 'json',
                    async: false,
                    success: function (data) {
                        Modal.alert({msg: data.message})
                        if (data.state) {
                            refreshRoleList();
                        }
                    }
                });
            }
    })
软件功能: * 无限级弹出窗口 * 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、付费专栏及课程。

余额充值