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(''));
thi
4000
s.$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;}, "关闭哈哈");
*/