一个pop弹窗

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
<!--
function ($) {
// debugger;

var Pop = function (opt) {
this.default_opt = {
type: 'alert',
title: '提示信息',
content: '这是提示信息',
callback: null,
callback_1: null,
callback_2: null
};
this.opt = $.extend({}, this.default_opt, opt);
this.root = null;
this.template = '<div class="xw-mask"><div class="xw-pop-cont"><div class="xw-pop-body"><p class="xw-pop-title">{{title}}</p><p class="xw-pop-content">{{content}}</p></div><div class="xw-pop-foot">{{type}}</div></div></div>';
this.alert = '<div class="xw-pop-btn alert-btn">好</div>';
this.confirm = '<div class="xw-pop-btn confirm-btn confirm-btn-1">取消</div><div class="xw-pop-btn confirm-btn confirm-btn-2">确定</div>';
}

Pop.prototype = {
init: function () {
this.create();
this.bind(this.opt);
},

create: function () {
this.root = $(this.html(this.opt)).appendTo('body');
},

html: function (opt) {
return this.template.replace('{{title}}', opt.title).replace('{{content}}', opt.content).replace('{{type}}', this[opt.type]);
},

bind: function (opt) {
var self = this;
self.root.find('.xw-pop-btn').on('click', function () {
if(opt.type == 'alert' && opt.callback)
opt.callback();
else if($(this).hasClass('confirm-btn-1') && opt.callback_1)
opt.callback_1();
else if($(this).hasClass('confirm-btn-2') && opt.callback_2)
opt.callback_2();

self.root.remove();
self.root = null;
});
}
}

$.pop = function (opts) {
var pop = new Pop(opts);
pop.init();
}
})($);

//-->
</script>
</body>
</html>

原文地址:https://www.cnblogs.com/zhouzhou163/p/6100478.html