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;}, "关闭哈哈"); */