分享js自动生成弹框的代码
在网上搜索的原生js弹框插件改成自己项目需要的。。目前已改得面目全非了:lol(function(window,undefined){
var document = window.document;
//消息弹出框对外主体方法
var messageBox = {
alert:function(content){//普通提示框
new Dialog({
html:content,
type:"1",
cancleButton:false
});
},
confirm:function(content,fn){//询问提示框
new Dialog({
html:content,
cancleButton:true,
type:"2",
callback:function(){
fn();
}
});
},
success:function(content){ // 成功提示框
new Dialog({
html:content,
cancleButton:true,
type:"3"
});
},
error:function(content){ //失败提示框
new Dialog({
html:content,
type:"4"
});
},
warn:function(content){ //警告提示框
new Dialog({
html:content,
type:"5"
});
}
};
//消息弹出框对内的辅助类
var messageHelp = {
create:function(ele,obj){
var element = document.createElement(ele);
for (var i in obj){
if(i === 'class' || i === 'className'){
element.className = obj;
}else{
element.setAttribute(i,obj);
}
}
return element;
},
text:function(ele,txt){
if(!this.isElement(ele)){return;}
ele.innerText = txt;
return ele;
},
append:function(son,parent){
varsonEle = this.isString(son) ? this.getId(son) : son;
var par = this.isString(parent) ? this.getId(parent) : parent;
if(!this.isElement(par)){
par = document.body;
}
if(!this.isElement(sonEle) || !this.isElement(par)){
return;
}
par.appendChild(sonEle);
},
remove:function(o){
if(o && o.parentNode){
o.parentNode.removeChild(o);
}
},
addClass:function(o,str){
if(!this.isElement(o)){
return;
}
var className = o.className;
var reg =eval("/^" + str + "$ | " + str + "$|^" + str + " | " + str + " /");
if(reg.test(className)){
return;
}
if(className !== ''){
o.className = className + " " + str;
}else{
o.className = str;
}
},
removeClass:function(o,str){
if(!this.isElement(o)){
return;
}
var className = o.className;
if(this.isEmpty(className)){
var reg = new RegExp(str,"g");
var n = className.replace(reg,"");
o.className = n;
}
},
hasClass : function (o, str) {
if (!this.isElement(o)) {
return;
}
var className = o.className;
var reg = eval("/^" + str + "$| " + str + "$|^" + str + " | " + str + " /");
if (reg.test(className)) {
return true;
} else {
return false;
}
},
is : function (o, type) {
var obj = Object.prototype.toString.call(o);
if (arguments.length === 2) {
return obj === '';
} else {
return obj.slice(7, -1).toLowerCase();
}
},
isArray : function (o) {
return this.is(o, 'Array');
},
isObject : function (o) {
return this.is(o, 'Object');
},
isFunction : function (o) {
return this.is(o, 'Function');
},
isNumber : function (o) {
return this.is(o, 'Number');
},
isString : function (o) {
return this.is(o, 'String');
},
isElement:function(o){
return (o && o.nodeName) ? true : false;
},
isEmpty : function (o) {
return o === '' || o === null;
},
getId:function(id){
return this.isString(id) ? document.getElementById(id) : id;
},
add:function(obj,t,fn){
var o = (typeof obj === 'string') ? document.getElementById(obj) : obj;
if(!o){
return;
}
if(o.addEventListener){
o.addEventListener(t,fn,false);
}else if(o.attachEvent){
o.attachEvent('on' + t,fn);
}else{
o['on' + t] = fn;
}
},
delete:function(o,t,fn){
if(o.removeEventListener){
o.removeEventListener(t,fn,false);
}else if(o.detachEvent){
o.deatachEvent('on'+t,fn);
}else{
o['on' + t] = null;
}
},
stopPropagation:function(){
if(window.event){
return this.getEvent().cancelBubble = true;
}else{
return arguments.callee.caller.arguments.stopPropagation();
}
},
stopDefault:function(){
if(window.event){
return this.getEvent().returnValue = false;
}else{
return arguments.callee.caller.arguments.preventDefault();
}
},
getEvent:function(e){
return e || window.event;
}
};
function Dialog(arg){
var obj = arg || { };
this.identity = function(str1,str2){
return str1 === str2;
};
this.isFn = function(fn){
if(messageHelp.isFunction(fn)){
fn.call(this);
}
};
this.name = {
shadow:"messageui-shadow",
layer : "messageui-dialog",
title:"messageui-title",
content:"messageui-content",
button:"messageui-btn",
buttonOk:"messageui-btnOk",
buttonCancle:"messageui-btnCancle",
iconConfirm:"confirm",
iconSuccess:"success",
iconError:"error",
iconWarn:"warn",
dialogType:"dialogType"
};
this.config = {
width:messageHelp.isNumber(obj.width) ? obj.width : 300,
height: obj.height,
title:obj.title || "信息提示",
okText : obj.okText || "确定",
cancleText : obj.cancleText || "取消",
okButtoon: this.identity(obj.okButton,false) ? obj.okButton:true,
cancleButton:this.identity(obj.cancleButton,false) ? obj.cancleButton:true,
html:obj.html,
type:obj.type,
addClass:obj.addClass,
callback:obj.callback
};
this.shadow = messageHelp.create("div",{"class":this.name.shadow});
this.layer = messageHelp.create("div",{ "class":this.name.layer});
this.title = messageHelp.create("div",{"class":this.name.title});
this.container = messageHelp.create("div",{"class":this.name.content});
this.button = messageHelp.create("div",{"class":this.name.button});
messageHelp.append(this.title,this.layer);
messageHelp.text(this.title,this.config.title);
if(this.config.type != "1"){
switch(this.config.type)
{
case "2": //代表询问提示框
this.icon = messageHelp.create("div",{"class":this.name.iconConfirm});
break;
case "3": //成功提示框
this.icon = messageHelp.create("div",{"class":this.name.iconSuccess});
break;
case "4": //错误提示框
this.icon = messageHelp.create("div",{"class":this.name.iconError});
break;
case "5": //警告提示框
this.icon = messageHelp.create("div",{"class":this.name.iconWarn});
break;
}
messageHelp.append(this.container,this.layer);
messageHelp.addClass(this.icon,this.name.dialogType);
messageHelp.append(this.icon,this.container);
messageHelp.text(this.icon,this.config.html);
}else{
messageHelp.append(this.container,this.layer);
messageHelp.text(this.container,this.config.html);
}
messageHelp.append(this.button,this.layer);
if(this.config.okButtoon){ //如果确定按钮为true的话，添加确定按钮
this.buttonOk = messageHelp.create("a",{"class":this.name.buttonOk});
messageHelp.append(this.buttonOk,this.button);
messageHelp.text(this.buttonOk,this.config.okText);
}
if(this.config.cancleButton){ //如果取消按钮为true的话，添加取消按钮
this.buttonCancle = messageHelp.create("a",{"class":this.name.buttonCancle});
messageHelp.append(this.buttonCancle,this.button);
messageHelp.text(this.buttonCancle,this.config.cancleText);
}
this.init();
}
Dialog.prototype = {
init:function(){
this.create();
this.event();
},
create:function(){
messageHelp.append(this.shadow);
messageHelp.append(this.layer);
},
event:function(){
var self = this;
var add = messageHelp.add;
add(this.layer,'click',function(e){
messageHelp.stopPropagation(e);
});
add(this.shadow,'click',function(e){
messageHelp.stopPropagation(e);
});
add(this.buttonOk,'click',function(){
self.isFn(self.config.callback);
self.remove();/* 消息弹框组件样式 */
.messageui-shadow{
position:fixed;
top:0px;
left:0px;
z-index: 300;
background-color:#000;
opacity: 0.3;
width:100%;
height:100%;
}
.messageui-dialog{
min-width: 280px;
max-width: 320px;
background-color:#fff;
box-shadow: 1px 1px 50px rgba(0,0,0,.3);
border-radius: 2px;
position: fixed;
z-index: 400;
left:40%;
top:30%;
}
.messageui-title{
background: #00a0e9;
color: #fff;
border: none;
padding: 0 80px 0 20px;
height: 42px;
line-height: 42px;
border-bottom: 1px solid #eee;
font-size: 14px;
overflow: hidden;
border-radius: 2px 2px 0 0;
}
.messageui-content{
position: relative;
margin: 0;
padding: 20px;
line-height: 24px;
word-break: break-all;
overflow: hidden;
font-size: 14px;
overflow-x: hidden;
overflow-y: auto;
text-align: center;
}
.messageui-dialog .dialogType{
padding: 20px 10px 20px 60px;
background-position: left center;
background-repeat: no-repeat;
display: inline-block;
text-align: left;
}
.messageui-dialog .confirm{
background-image: url(../imgs/DialogInfo5.png);
}
.messageui-dialog .success{
background-image: url(../imgs/DialogInfo2.png);
}
.messageui-dialog .error{
background-image: url(../imgs/DialogInfo3.png);
}
.messageui-dialog .warn{
background-image: url(../imgs/DialogInfo4.png);
}
.messageui-btn{
padding: 10px;
text-align:center;
border-top: 1px solid #E9E7E7;
}
.messageui-btn a{
height:28px;
line-height: 28px;
font-weight: 400;
margin:0 10px;
padding:0 15px;
border-radius: 2px;
text-decoration: none;
cursor: pointer;
display: inline-block;
}
.messageui-btnOk{
background-color:#2e8ded;
color:#fff;
}
.messageui-btnCancle{
background-color:#dedede;
color:#000;
}
/* 消息弹框组件样式 */
});
add(this.buttonCancle,'click',function(){
self.remove();
});
return this;
},
remove:function(){
messageHelp.remove(this.shadow);
messageHelp.remove(this.layer);
return this;
}
};
window.messageBox = messageBox;
})(window);
+1 ++
页:
[1]