Bootstrap风格可拖拽非模态层

弹层用到的参数基本都有注解了，有问题可以留言

// jquery.noModel.js
/*!
 * 非模态层，可拖拽
 * wangbt
 */
;(function($) {
    'usr strict';

    var sprintf = function(str) {
        var args = arguments,
            flag = true,
            i = 1;

        str = str.replace(/%s/g, function() {
            var arg = args[i++];

            if (typeof arg === 'undefined') {
                flag = false;
                return '';
            }
            return arg;
        });
        return flag ? str : '';
    };

    /*****NoModel Begin****/
    var NoModel = function(element, options) {
        this.$content = $(options["content"]);
        this.$content_ = this.$content.clone();
        this.$option = options;

        this.init();
    };

    // noModel的默认参数
    NoModel.DEFAULTS = {
        id: "noModel",// noModel 的ID，页面中唯一，如果ID重复，第二个层会覆盖第一个层
        zIndex: 1024,// 弹层在页面中的层高
        title: "",// 弹层的标题，默认为空
        content: "",// 弹层的内容【注：内容为html代码片段】，默认为空
        width: 500,// noModel的宽
        height: 400,// noModel的高
        isDragable: true,// 是否可推拽，默认可推拽
        isHideBut: false,// 是否隐藏弹层的默认按钮
        isDisabled: false,// 弹层中内容是否禁用
        singleButtons: [{
            id: "closeBtnId",// 按钮ID
            name: "关闭",// 按钮描述【即：文本】
            order: 1,// 按钮位置【注：依据order的值给按钮排序，值越到越靠后】
            halign: "right",// 按钮对齐方式，right或left，默认右对齐
            isDisabled: false,// 按钮是否禁用
            params: 'undefined',// 按钮回调函数所需参数
            callback: function(btnObj) {// 回调函数
                return true;// 返回值，依据返回值判断是否关闭弹层，true关闭，false不关闭
            }
        }, {
            id: "surceBtnId",
            name: "确定",
            order: 2,
            halign: "right",
            isDisabled: false,
            params: 'undefined',
            callback: function(btnObj) {
                return true;
            }
        }]// 弹层默认按钮

    };

    NoModel.prototype.init = function() {
        this.initModelTitle();
        this.initModelContent();
        var $that = this;
        this.initModelFooter();

        this.initModel();
    };

    NoModel.prototype.initModelTitle = function() {
        var w = this.$option.width - 50;
        this.$titleObj = $([
            '<div class="model-title">',
                '<div class="title-text" style="width: ' + w + 'px;">' + this.$option.title + '</div>',
                '<div class="title-close"><button title="关闭">X</button></div>',
            '</div>'
        ].join(''));
    };

    NoModel.prototype.initModelContent = function() {
        var heightCss = "";
        if(!this.$option.isHideBut) {
            heightCss = "height: " + Number(this.$option.height - 100) + "px;"
        } else {
            heightCss = "height: " + Number(this.$option.height - 55) + "px;"
        }
        var style = sprintf("style='%s'", heightCss);
        this.$contentObj = $([
            '<div class="model-content" ' + style + '>',
                '<div class="content-body">',
                '</div>',
            '</div>'
        ].join(''));
        this.$content.appendTo(this.$contentObj.find(".content-body"));
    };

    NoModel.prototype.initModelFooter = function() {
        var $that = this;
        this.$footerObj = $(['<div class="model-footer">', '</div>'].join(''));
        /*this.$footerObj.css({"height": "50px"});*/
        var $source = $('<div></div>');
        var btns = $that.$option.singleButtons;
        if (btns instanceof Array && btns.length > 0) {
            btns.sort(function(obj1, obj2) {
                var order1 = typeof obj1['order'] == 'undefined' ? 0 : obj1['order'];
                var order2 = typeof obj2['order'] == 'undefined' ? 0 : obj2['order'];
                if (order1 < order2) {
                    return -1;
                } else if (order1 > order2) {
                    return 1;
                }
                return 0;
                //等同上面效果
                //return obj1['order'] - obj2['order'];
            });
            $.each(btns, function(k, v) {
                var $btn = $('<button type="button"></button>');
                $btn.attr("id", $that.$option.id + '_' + v['id']);
                $btn.text(v['name']);
                $btn.addClass('btn btn-info');
                if (v['halign'] != 'undefined'){
                    $btn.css({
                        "float": v['halign'],
                        "margin-top": "5px",
                        "margin-right": "10px"
                    });
                }
                $btn.attr("disabled", v['isDisabled']);
                $btn.click("click", function() {
                    var isHand = true;
                    if (v["callback"]) {
                        isHand = v.callback(v.params);
                    }
                    if (isHand) {
                        $that.$model.remove();
                    }
                });

                $btn.appendTo($source)
            });
        }
        $source.appendTo(this.$footerObj);
    };

    NoModel.prototype.initModel = function() {
        var $that = this;
        var marginLeft = -(this.$option.width / 2),
            marginTop = -(this.$option.height / 2);
        this.$model = null;
        if($(window.document).find("#" + this.$option.id).length <= 0){
            this.$model = $("<div class='no-model' no-model='nomodel'></div>");
            this.$model.attr("id", this.$option.id);
            this.$model.css({
                'margin-left': marginLeft + 'px',
                "margin-top": marginTop + "px",
                "width": $that.$option.width,
                "height": $that.$option.height,
                "position": "fixed"
            });
        }else{
            this.$model = $("#"+this.$option.id);
        }

        this.$model.html("");

        this.$titleObj.appendTo(this.$model);
        this.$contentObj.appendTo(this.$model);
        if(!this.$option.isHideBut) {
            this.$footerObj.appendTo(this.$model);
        }
        this.$model.appendTo($("body"));//isDragable
        this.$model.fadeIn(2000);

        if(this.$option.isDragable) {
            this.$model.draggable({
                handle: ".model-title, .model-footer",
                containment: "html",
                scroll: false,
                cursor: "move"
            });
        }
        this.$contentObj.find(".content-body").mCustomScrollbar({
            theme: "minimal-dark"
        });
        this.$titleObj.find(".title-close button").off("click").on("click", function(){
            $that.$model.remove();
        });
    };

    NoModel.prototype.showModel = function(){

    };

    NoModel.prototype.hiddenModel = function(){

    };

    /***NoModel End***/

    var allMethods = ['showModel','hiddenModel'];

    $.fn.noModel = function(option, _query){
        var value;
        this.each(function(){
            var $this = $(this),
                data = $this.data('no.model'),
                options = $.extend({}, NoModel.DEFAULTS, typeof option == "object" && option);
            if(typeof option == "string"){
                if($.isArray(option, allMethods) < 0){
                    throw new Error("Unknown method: " + option);
                }

                if(!data) return;

                value = data[option](_query);
                if(option == 'destroy'){
                    $this.removeData("no.model");
                }
            }
            /*if(!data){
                $this.data("no.model", new NoModel(this, options));
            }*/
            $this.data("no.model", new NoModel(this, options));
        });
        return typeof value === 'undefined' ? this : value;
    };

    $.fn.noModel.Constructor = NoModel;
    $.fn.noModel.defaults = NoModel.DEFAULTS;
    $.fn.noModel.methods = allMethods;


    jQuery.extend({
        noModel: function(option, _query){
            $(window).noModel(option, _query);
        }
    });

    $(function(){
        $("[no-model='nomodel']").noModel();
    });
})(jQuery);

// noModel.css
.no-model {
    position: fixed;
    z-index: 1000;
    display: block;
    outline: 0;
    padding: 0px 5px;
    border-radius: 5px;
    background-color: #fff;
    -webkit-overflow-scrolling: touch;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    overflow: hidden;
    left: 50%;
    top: 50%;
    display: none;
}

.no-model button {
    display: inline-block;
    line-height: 1.4285;
    border-radius: 4px;
    border: 1px solid transparent;
    background-color: #337ab7;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    vertical-align: middle;
}

.no-model>.model-title {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #E2E2E2;
}

.model-title>.title-text {
    font-size: 28px;
    font-weight: bold;
    line-height: 50px;
    padding: 2px 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    float: left;
}

.model-title>.title-close {
    float: right;
    font-size: 22px;
}

.title-close>button {
    background-color: #FFFFFF;
    color: #000000;
    font-weight: bold;
    font-size: 14px;
}

.no-model>.model-content {
    width: 100%;
    overflow: hidden;
}

.model-content>.content-body {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 3px 5px;
    overflow: auto;
    scrollbar-3d-light-color: #000;
}

.no-model>.model-footer {
    width: 100%;
    line-height: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 5px;
    text-align: right;
    padding: 0px 10px;
    border-top: 1px solid #E2E2E2;
}

依赖的JS和CSS
jquery-2.2.3.min.js
bootstrap.3.3.5.js
jquery-ui.min.js
jquery.mCustomScrollbar.min.js
jquery.mousewheel.min.js

bootstrap.3.3.5.css
jquery.mCustomScrollbar.min.css

// 使用文档
/*
 * 1、调用时先引入依赖JS和CSS
 * 2、引入jquery.noModel.js和noModel.css
 */
 $.noModel({
            id: "12345",
            title: "测试noModel弹层",
            content: "<h1>noModel的内容</h1>",
            width: 600,
            height: 500,
            isHideBut: false,
            singleButtons: [{
                name: "关闭哈哈",
                order: 2,
                halign: "right",
                isDisabled: true,
                params: "",
                callback: function(btnObj) {
                    return true;
                }
            }, {
                name: "提交",
                order: 1,
                halign: "right",
                isDisabled: false,
                params: "你好",
                callback: function(btnObj) {
                    alert(btnObj);
                    return false;
                }
            }]
        });

// 如果项目中多处用到的弹层使用参数都相同，可以将上面的弹层单独提到一个方法中，以方便调用，如下
var commFun = {
        /**
         * noModel层
         * @param id noModel的ID
         * @param title 标题
         * @param width 宽
         * @param height 高
         * @param content 内容
         * @param confirmFun 确定按钮的回调函数
         * @param subParams 确定按钮参数
         * @param isHideBut 是否隐藏按钮
         * @param closeFun 关闭按钮回调函数
         * @param closeParam 关闭按钮参数
         */
        noModel: function(id, title, width, height, content, confirmFun, subParams, isHideBut, closeFun, closeParam) {
            if(!verificat.isNotNull(isHideBut)) {
                isHideBut = false;
            }
            $.noModel({
                id: id,
                title: title,
                content: content,
                width: width,
                height: height,
                isHideBut: isHideBut,
                singleButtons: [{
                    name: "关闭",
                    order: 1,
                    halign: "right",
                    isDisabled: false,
                    params: closeParam,
                    callback: function(btnObj) {
                        if(closeFun != undefined && closeFun != null) {
                            return closeFun(closeParam);
                        } else {
                            return true;
                        }
                    }
                }, {
                    name: "确定",
                    order: 2,
                    halign: "right",
                    isDisabled: false,
                    params: subParams,
                    callback: function(btnObj) {
                        if(confirmFun != undefined && confirmFun != null) {
                            return confirmFun(btnObj);
                        } else {
                            return true;
                        }
                    }
                }]
            });
        }
}
/**
 *调用示例：commFun.noModel(123,"标题", 330, 400, "<h1>内容</h1>", function(d){alert(d); 
 *      return true;}, "确定哈哈", function(d){alert(d); return true;}, "关闭哈哈");
 */