关于lobibox Jquery+bootstrap的弹出框插件使用方式

Lobibox弹出框插件，更多案例参考地址：http://demo.htmleaf.com/1506/201506011729/index.html

1.从参考地址下载好源码之后，将源目录的demo删除，直接将这个目录直接引入到需要的项目中

2.导入两个CSS文件，default.css 和 lobibox.min.css：

3.导入3个js文件，按照顺序导入 jquery-1.11.3.min.js, bootstarp.min.js ,lobibox.min.js

4.导入之后就可以直接通过Lobibox对象调用消息提示框

a.普通消息提示框，第一个参数info,是一个可变的参数取值为：info-蓝色，success-绿色，error-红色，warning-黄色，具体使用方式可以参考官方demo

Lobibox.alert('info', {"消息提示"});

b.确认框信息框

Lobibox.confirm({ msg : '提示信息',callback : function($this, type, ev) {
if (type === 'yes') {
console.log('选择yes');
}else if(type == 'no'){
console.log('选择no');
}
}
});

5.提示框的样式修改，修改dist/lobibox.min.js文件的base.OPTIONS对象：

Lobibox.base.OPTIONS = {
bodyClass: "lobibox-open",
modalClasses: {
error: "lobibox-error", //消息异常
success: "lobibox-success", //消息成功
info: "lobibox-info", //消息提示
warning: "lobibox-warning", //消息警告
confirm: "lobibox-info", //消息确认框，这里默认的样式已经改为lobibox-info ：蓝色
progress: "lobibox-progress", //进度框
prompt: "lobibox-prompt", //消息输入确认框
"default": "lobibox-default", //默认样式
window: "lobibox-window" //弹出框
},
buttonsAlign: ["left", "center", "right"],
buttons: {
ok: {
"class": "lobibox-btn lobibox-btn-default", //lobibox-btn-default :按钮的默认样式，灰色底黑色字
text: "确定",
closeOnClick: !0
},
cancel: {
"class": "lobibox-btn lobibox-btn-cancel",
text: "取消",
closeOnClick: !0
},
yes: {
"class": "lobibox-btn lobibox-btn-default",
text: "确定",
closeOnClick: !0
},
no: {
"class": "lobibox-btn lobibox-btn-default",
text: "取消",
closeOnClick: !0
}
}
}

上传几张弹出框的效果图，因为我们项目全部默认蓝色为主色调，弹出框效果改成了蓝色：

关于lobibox Jquery+bootstrap的弹出框插件使用方式

猜你喜欢