自己写的基于bootstrap风格的弹框插件

自己写的一款基于bootstrap风格的弹框插件，暂时只有确认框、提示框。后续功能扩展、bug修改再更新。

;(function($){
    //默认参数
    var PARAMS;
    var DEFAULTPARAMS =
                    {
                        width: 500,
                        title: '提示消息',
                        content: '',
                        okbtn: '确定',
                        cancelbtn: '取消',
                        headerBackground: 'info',
                        vbackdrop: 'static',        //默认点击遮罩不会关闭modal
                        vkeyboard: true,            //按esc关闭modal
                        confirmFn: new Object,
                        cancelFn: new Object
                    };
    $.dialog = {
        confirm: function(params){
            $.dialog.initParmas(params);
            $.dialog.Show('confirm', function(e){
                if($.isFunction(PARAMS.confirmFn)){
                    PARAMS.confirmFn(e);
                }
            },
            function(f){
                if($.isFunction(PARAMS.cancelFn)){
                    PARAMS.cancelFn(f);
                }
            });
        },
        alert: function(params){
            $.dialog.initParmas(params);
            $.dialog.Show('alert', function(e){
                if($.isFunction(PARAMS.confirmFn)){
                    PARAMS.confirmFn(e);
                }
            }, null);
        },
        Show: function(type, confirmCaller, cancelCaller){
            var html = '<div class="modal fade" id="tipModal">'
                     + '<div class="modal-dialog" style="width:'+PARAMS.width+'px"><div class="modal-content">'
                     + '<div class="modal-header header_'+PARAMS.headerBackground+'">'
                     + '<a class="close" data-dismiss="modal">&times;</a>'
                     + '<h4 class="modal-title text-center">'+PARAMS.title+'</h4></div>'
                     + '<div class="modal-body text-center body_content">'+PARAMS.content+'</div>'
                     + '<div class="modal-footer">';
            if(type=='confirm'){
                html += '<button class="btn btn-default" id="btnCancel">'+PARAMS.cancelbtn+'</button>';
            }
            html += '<button class="btn btn-primary" id="btnOk">'+PARAMS.okbtn+'</button>';
            html += '</div></div></div></div>';
            $('body').append(html);
            $('#tipModal').modal({backdrop:PARAMS.vbackdrop,keyboard:PARAMS.vkeyboard});
            $.dialog.setDialogEvent(type, confirmCaller, cancelCaller);
        },
        initParmas: function(params){
            if(params!= undefined && params!= null){
                PARAMS = $.extend({}, DEFAULTPARAMS, params);
            }
        },
        setDialogEvent: function(type, confirmCaller, cancelCaller){
            switch(type){
                case 'confirm':
                    $("#btnOk").click(function(){
                        $('#tipModal').modal('hide');
                        $('#tipModal').on('hidden.bs.modal', function(){
                            $('#tipModal').remove();                //要先remove modal
                            if($.isFunction(confirmCaller)){
                                confirmCaller(true);
                            }

                        });
                    });
                    $("#btnCancel").click(function(){
                        $('#tipModal').modal('hide');
                        $('#tipModal').on('hidden.bs.modal', function(){
                            $('#tipModal').remove();
                            if($.isFunction(cancelCaller)){
                                cancelCaller(false);
                            }

                        });
                    });
                    break;
                case 'alert':
                    $("#btnOk").click(function(){
                        $('#tipModal').modal('hide');
                        $('#tipModal').on('hidden.bs.modal', function(){
                            $('#tipModal').remove();
                            if($.isFunction(confirmCaller)){
                                confirmCaller(true);
                            }
                        });
                    });
                    break;
            };
            $('#tipModal').on('hidden.bs.modal', function(){
                $('#tipModal').remove();
            });
            $("#tipModal .close").click(function(){
                $('#tipModal').on('hidden.bs.modal', function(){
                    $('#tipModal').remove();
                });
            });
            //设置窗口可拖动
            $('#tipModal .modal-header').Draggable($('#tipModal .modal-dialog'));
        }
    };

    dialogConfirm = function(params){
        $.dialog.confirm(params);
    };

    dialogAlert = function(params){
        $.dialog.alert(params);
    };
})(jQuery);

//拖动层
;(function($){
    $.fn.extend({
        Draggable: function(objMoved){
            return this.each(function(){
                //鼠标按下时的位置
                var mouseDownPosiX, mouseDownPosiY;
                //obj的初始位置
                var objPosiX, objPosiY;
                //鼠标移动的距离
                var tempX, tempY;
                //移动的对象
                var obj = $(objMoved)==undefined ? $(this): $(objMoved);

                //是否处于移动状态
                var status = false;

                $(this).mousedown(function(e){
                    status = true;
                    mouseDownPosiX = e.pageX;
                    mouseDownPosiY = e.pageY;
                    objPosiX = obj.css("left").replace("px", "");
                    objPosiY = obj.css("top").replace("px", "");
                }).mouseup(function(){
                    status = false;
                });
                $(document).mousemove(function(e){
                    if(status){
                        tempX = parseInt(e.pageX) - parseInt(mouseDownPosiX) + parseInt(objPosiX);
                        tempY = parseInt(e.pageY) - parseInt(mouseDownPosiY) + parseInt(objPosiY);
                        obj.css({ "left": tempX + "px", "top": tempY + "px" });
                    }
                    //判断是否超出窗体
                    //计算出弹出层距离右边的位置
                    var dialogRight = parseInt($(window).width())-(parseInt(obj.css("left"))+parseInt(obj.width()));
                    var dialogBottom = parseInt($(window).height())-(parseInt(obj.css("top"))+parseInt(obj.height()));
                    var maxLeft = $(window).width()-obj.width();
                    var maxTop = $(window).height()-obj.height();
                    if(parseInt(obj.css("left"))<=0){
                          obj.css("left","0px");
                    }
                    if(parseInt(obj.css("top"))<=0){
                        obj.css("top","0px");
                    }
                    if(dialogRight<=0){
                        obj.css("left",maxLeft+'px');
                    }
                    if(dialogBottom<=0){
                        obj.css("top", maxTop+'px');
                    }
                }).mouseup(function(){
                    status = false;
                }).mouseleave(function(){
                    status = false;
                });
            });
        }
    });
})(jQuery)

html页面中调用：

<body>
<div class="box">
    <button class="btn btn-default" id="btn_confirm">确认框</button>
    <button class="btn btn-default" id="btn_cancel">提示框</button>
</div>
</body>
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="js/dialog.js"></script>
<script type="text/javascript">
$(function(){
    $("#btn_confirm").click(function(){
        dialogConfirm({
            width: 500,
            content: '确定要删除吗?',
            headerBackground: 'info',
            vbackdrop: true,        //默认点击遮罩不会关闭modal
            vkeyboard: true,            //按esc关闭modal
            confirmFn: function(e){
                dialogAlert({
                    width: 300,
                    content: 'true',
                    headerBackground: 'success',
                    vbackdrop: 'static',        //默认点击遮罩不会关闭modal
                    vkeyboard: true            //按esc关闭modal
                });
            },
            cancelFn: function(f){
                alert(f);
            }
        })
    });

    $('#btn_cancel').click(function(){
        dialogAlert({
            width: 300,
            content: '删除成功!',
            headerBackground: 'error',
            vbackdrop: 'static',        //默认点击遮罩不会关闭modal
            vkeyboard: true,            //按esc关闭modal
        });
    });
});
</script>

感觉写的不是很好，后面修改了或者扩展了功能再更新。源码会上传到文件。

文件名是：dialogByCy.rar