1、首先先定义好弹出框的HTML结构
<div class="g-dialog-contianer">
<div class="dialog-window">
<div class="dialog-header waiting"></div>
<div class="dialog-container">你是否要清空购物车？</div>
<div class="dialog-footer">
<button class="green">按钮1</button>
<button class="red">按钮2</button>
</div>
</div>
</div>
2、编写好结构之后，编写CSS样式
.g-dialog-contianer{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
display: -webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
}
.g-dialog-contianer .dialog-window{
padding: 1em;
border-radius: 10px;
background-color: rgba(0,0,0,0.8);
}
.g-dialog-contianer .dialog-window .dialog-header{
width: 50px;
height: 50px;
margin: 0 auto;
}
.g-dialog-contianer .dialog-window .dialog-header.waiting{
background: url("wait.png")no-repeat 0 0;
background-size: 50px;
}
.g-dialog-contianer .dialog-window .dialog-header.warning{
background: url("warning.png")no-repeat 0 0;
background-size: 50px;
}
.g-dialog-contianer .dialog-window .dialog-header.success{
background: url("success.png")no-repeat 0 0;
background-size: 50px;
}
.g-dialog-contianer .dialog-window .dialog-container{
padding: 1em 1em 0;
color: #fff;
line-height: 180%;
text-align: center;
}
.g-dialog-contianer .dialog-window .dialog-footer{
padding: 1em 1em 0;
display: -webkit-flex;
-webkit-justify-content:center;
-webkit-align-items:center;
}
.g-dialog-contianer .dialog-window .dialog-footer button{
-webkit-appearance:normal;
background-color: rgba(255,255,255,0.8);
padding: 0.8em 1.8em;
border: none;
color: #eee;
border-radius: 5px;
margin: 0 1.3em;
text-shadow: #666 1px 1px 0;
}
.g-dialog-contianer .dialog-window .dialog-footer button.green{
background-color: rgba(2,202,200,0.8);
}
.g-dialog-contianer .dialog-window .dialog-footer button.red{
background-color: rgba(251,23,50,0.8);
}4、编写js代码
//定义函数用于构造，来传递参数
var Dialog = function(config) {
//默认配置参数
this.config = {
//对话框宽高
width: "auto",
height: "auto",
//对话框提示信息
message: null,
//对话框类型
type: "waiting",
//按钮配置
buttons: null,
//对话框保持时间3秒
delay: null,
//对话框遮罩层透明度
maskOpcity: 0.8
};
//如果用户输入参数，将参数扩展
if (config && $.isPlainObject(config)) {
$.extend(this.config, config);
}
//给函数定义变量，并和config对象一起传入原型
this.body = $("body");
this.mask = $("<div class='g-dialog-contianer'>");
this.win = $('<div class="dialog-window">');
this.winHeader = $('<div class="dialog-header"></div>');
this.winContent = $('<div class="dialog-container">');
this.winFooter = $('<div class="dialog-footer">');
}; //原型中定义函数
Dialog.prototype = {
creat: function() {
//1.this指的就是该原型对象
//2.(this.)表示原型对象调用函数中的变量
var _this_ = this,
config = this.config,
body = this.body,
mask = this.mask,
win = this.win,
winHeader = this.winHeader,
winContent = this.winContent,
winFooter = this.winFooter;
//如果用户没输入参数,默认弹出等待框,否则用扩展值
win.append(winHeader.addClass(config.type));
//如果用户输入massage，显示到弹框中
if (config.message) {
win.append(winContent.html(config.message));
}
//如果用户输入按钮组
if (config.buttons) {
this.creatButton(winFooter, config.buttons);
win.append(winFooter);
}
//如果用户自定义弹出框的宽高
if (config.width != 'auto') {
win.width(config.width);
}
if (config.height != 'auto') {
win.height(config.height);
}
//默认透明度为0.8
var opct = config.maskOpcity;
mask.css("backgroundColor", "rgba(0,0,0," + opct + ")");
//如果用户输入弹框保持时间
if (config.delay && config.delay !== 0) {
window.setTimeout(function() {
//调用原型中的close()方法
_this_.close();
}, config.delay);
}
//渲染html
mask.append(win);
body.append(mask);
}, //关闭弹出框
close: function() {
this.mask.remove();
}, //创建按钮组
creatButton: function(footer, buttons) {
var _this_ = this;
//遍历出数组
$(buttons).each(function(index, element) {
var type = element.type ? " class=" + element.type : "";
var text = element.text ? element.text : "button" + index;
var callback = element.callback ? element.callback : null; var singleButton = $("<button" + type + ">" + text + "</button>");
//如果有回调函数，按钮绑定回调函数
if (callback) {
singleButton.on('click', function() {
callback();
_this_.close();
});
}
//否则默认为关闭弹出框
else {
singleButton.on('click', function() {
_this_.close();
});
}
footer.append(singleButton);
});
}
}; function startDialog1() {
var dialog = new Dialog();
dialog.creat();
} function startDialog2() {
var dialog = new Dialog({
width: "auto",
height: "auto",
type: "warning",
delay: 2000,
});
dialog.creat();
} function startDialog3() {
var dialog = new Dialog({
width: "auto",
height: "auto",
type: "success",
buttons: [{
type: "green",
text: "确定",
}, {
type: "red",
text: "取消"
}]
});
dialog.creat();
} function startDialog4() {
var dialog = new Dialog({
width: "auto",
height: "auto",
type: "warning",
buttons: [{
type: "green",
text: "确定",
callback: function() { }
}]
});
dialog.creat();
} function startDialog5() {
var dialog = new Dialog({
width: "auto",
height: "auto",
buttons: [{
type: "green",
text: "确定",
callback: function() { }
}, {
type: "green",
text: "确定",
callback: function() { }
}, {
type: "green",
text: "确定",
callback: function() { }
}]
});
dialog.creat();
} function startDialog6() {
var dialog = new Dialog({
width: "auto",
height: "auto",
message: "你是否要清空购物车？",
type: "warning",
buttons: [{
type: "green",
text: "确定",
callback: function() {
window.open('http://baidu.com');
}
}, {
type: "red",
text: "取消"
}],
maskOpcity: 0.6
});
dialog.creat();
}