最近项目当中运用到了dialog弹窗插件,本来是想在网上找一个随便用用,因为产品的需求,找来找去没发现比较合适的,于是乎,自己造起了轮子,此dialog插件基于jquery打造,加入了css3效果,由于项目中运用了require.js,所以写了一个require.js版本的,当然也有纯jquery版本的,先来看纯jquery版本的demo:
html 代码
<style>
.btn{margin: 20px;display: block;width: 200px;text-align: center;}
/* 插件css start */
*{padding: 0;margin: 0;font: 14px/1.8em "microsoft yahei";-moz-user-select: -moz-none; user-select: none; -webkit-user-select: none;}
.dialogBox{position: absolute;top: 50%;left: 50%;padding: 10px;box-sizing: border-box;}
.dialogTitle{height: 36px;line-height: 36px;border-bottom: 1px solid #d9d9d9;font-size: 16px;}
.dialogcloseBtn{font-size: 24px;position: absolute;right: 10px;top: 12px;text-decoration: none;color: #666;line-height: 24px;height: 24px;width: 24px;text-align: center;}
.dialogContentText{padding: 30px 0;text-align: center;}
.dialogButtons{display: flex;justify-content: center;}
.dialogButtons a{height: 40px;line-height: 40px;border-radius: 4px;text-align: center;margin: 0 15px;color: #fff;text-decoration: none;padding: 0 30px;}
a.danger{background:#dd514c;}
a.danger:hover{background:#cc4843;}
a.warning{background:#e0690c;}
a.warning:hover{background:#D06511;}
a.success{background:#5eb95e;}
a.success:hover{background:#4aaa4a;}
a.primary{background:#0a628f;}
a.primary:hover{background:#0e90d2;}
a.default{background:#e6e6e6;}
a.default:hover{background:#c7c7c7;}
.dialogMask{background: rgba(0,0,0,.6);width: 100%;height: 100%;position: fixed;top:0;left: 0;transition: all 0.25s ease 0.2s;opacity: 0;visibility: hidden;}
.dialogContent{padding: 10px 0}
.sacleIn{animation: sacleIn 0.5s ease-in-out both;}
.sacleOut{animation: sacleOut 0.5s ease-in-out both;}
.visible{opacity: 1;visibility: visible;}
.bounceInDown{-webkit-animation:bounceInDown 0.8s ease both;-moz-animation:bounceInDown 0.8s ease both;}
@-webkit-keyframes bounceInDown{
0%{opacity:0;-webkit-transform:translateY(-200%)}
60%{opacity:1;-webkit-transform:translateY(50px)}
80%{-webkit-transform:translateY(-10px)}
100%{-webkit-transform:translateY(0)}
}
@-moz-keyframes bounceInDown{
0%{opacity:0;-moz-transform:translateY(-200%)}
60%{opacity:1;-moz-transform:translateY(50px)}
80%{-moz-transform:translateY(-10px)}
100%{-moz-transform:translateY(0)}
}
.bounceOutDown{-webkit-animation:bounceOutDown 0.8s ease both;-moz-animation:bounceOutDown 0.8s ease both;}
@-webkit-keyframes bounceOutDown{
0%{-webkit-transform:translateY(0)}
20%{opacity:1;-webkit-transform:translateY(-50px)}
100%{opacity:0;-webkit-transform:translateY(200%)}
}
@-moz-keyframes bounceOutDown{
0%{-moz-transform:translateY(0)}
20%{opacity:1;-moz-transform:translateY(-50px)}
100%{opacity:0;-moz-transform:translateY(200%)}
}
.bounceInLeft{-webkit-animation:bounceInLeft 0.8s ease both;-moz-animation:bounceInLeft 0.8s ease both;}
@-webkit-keyframes bounceInLeft{
0%{opacity:0;-webkit-transform:translateX(-200%)}
60%{opacity:1;-webkit-transform:translateX(50px)}
80%{-webkit-transform:translateX(-10px)}
100%{-webkit-transform:translateX(0)}
}
@-moz-keyframes bounceInLeft{
0%{opacity:0;-moz-transform:translateX(-200%)}
60%{opacity:1;-moz-transform:translateX(50px)}
80%{-moz-transform:translateX(-10px)}
100%{-moz-transform:translateX(0)}
}
.bounceOutRight{-webkit-animation:bounceOutRight 0.8s ease both;-moz-animation:bounceOutRight 0.8s ease both;}
@-webkit-keyframes bounceOutRight{
0%{-webkit-transform:translateX(0)}
20%{opacity:1;-webkit-transform:translateX(-50px)}
100%{opacity:0;-webkit-transform:translateX(200%)}
}
@-moz-keyframes bounceOutRight{
0%{-moz-transform:translateX(0)}
20%{opacity:1;-moz-transform:translateX(-50px)}
100%{opacity:0;-moz-transform:translateX(200%)}
}
@keyframes sacleIn{
0%{transform: scale(0);}
100%{transform: scale(1);}
}
@keyframes sacleOut{
0%{transform: scale(1);}
100%{transform: scale(0);}
}
/* 插件css end */
</style>
</head>
<body>
<button value="click" class="btn btn1">默认无参数</button>
<button value="click" class="btn btn2">带回调函数的alert弹出框</button>
<button value="click" class="btn btn3">多个按钮的alert弹出框</button>
<button value="click" class="btn btn4">5秒后关闭</button>
<button value="click" class="btn btn5">可拖拽的模态框</button>
<button value="click" class="btn btn6">支持iframe的可拖拽模态框</button>
<div class=’a’ style="display: none;"><p>我是内容</p></div>
<script>
/*
***by jone 2016-10-27
*/
(function($){
function EasyDialog(ele,options) {
this.ele = ele;
this.setting = {
width: 300,
height: 400,
borderRadius: 0,
boxShadow: ‘0 3px 15px rgba(0, 0, 0, .4), 0 0 5px rgba(0, 0, 0, .4)’,
msg: ‘Hello,this ia a eaeyDialog !’,
title: ‘标题’,
type: ‘alert’,
seconds: 5,
effect: ‘default’,
buttons: [‘确定’],
buttonClass: [‘danger’, ‘warning’, ‘success’, ‘primary’, ‘default’],
content: ‘我是被弹出的内容’,
callback: function() {},
isDrag: false
}
this.config = null;
this.options = options;
}
EasyDialog.prototype = {
init: function(options) {
var config = this.config = $.extend(this.setting, this.options);
var body = $("body");
var dialogBox = $("<div class=’dialogBox’></div>");
var dialogContent = $("<div class=’dialogContent’></div>");
function createHTML(){
if ($(".dialogBox").length == 0) dialogBox.appendTo(body);
dialogBox.css({
width: config.width,
height: config.height,
background: ‘#fff’,
border: ‘1px solid #d9d9d9’,
borderRadius: config.borderRadius,
position: ‘fixed’,
top: ‘50%’,
left: ‘50%’,
marginLeft: (/\%/g).test(config.width) ? -parseInt(config.width) / 2 + ‘%’ : -config.width / 2,
marginTop: (/\%/g).test(config.height) ? -parseInt(config.height) / 2 + ‘%’ : -config.height / 2,
boxShadow: config.boxShadow,
transform: ‘translate(0, 0)’,
});
if ($(".dialogContent").length == 0) dialogContent.appendTo(dialogBox);
if ($(".dialogMask").length == 0) {
dialogBox.wrap(‘<div class="dialogMask"></div>’)
} else {
$(".dialogMask").show();
};
}
var _this = this;
var speed = config.effect == ‘default’ ? 0 : 200;
this.ele.on("click", function() {
createHTML();
if (config.type == ‘alert’) {
$(".dialogTitle").remove();
if (config.msg.replace(/^\s+|\s+$/g, "") != "") {
if ($(".dialogContentText").length == 0) $("<div class=’dialogContentText’>" + config.msg + "</div>").appendTo($(".dialogContent"));
} else {
alert("msg参数设置不能为空");
return;
}
// 定时关闭
if ($.isArray(config.buttons) == true && config.buttons.length > 0) {
if ($(".dialogButtons").length == 0) {
$("<div class=’dialogButtons’></div>").appendTo($(".dialogContent"));
var html = ”;
for (var i = 0; i < config.buttons.length; i++) {
html += "<a href=’javascript:;’ class=’" + config.buttonClass[i] + "’>" + config.buttons[i] + "</a>";
}
$(".dialogButtons").html(html);
}
} else if (config.buttons.replace(/^\s+|\s+$/g, "") == "") {
if ($(".dialogTime").length == 0) $(".dialogContentText").after(‘<div class=\’dialogTime\’ style=\’text-align:center;\’><span>’ + config.seconds + ‘</span>秒后关闭</div>’);
var s = config.seconds;
var timer = null;
timer = setInterval(function() {
s–;
if (s == 0) {
clearInterval(timer);
_this.effects[config.effect][‘eleHide’]($(".dialogBox"));
setTimeout(function() {
$(".dialogBox").parent().remove();
}, 500)
}
$(".dialogTime span").text(s);
}, 1000);
$(".dialogTime span").text(config.seconds);
} else {
alert("buttons参数设置错误,只能设置为数组或空");
return;
}
dialogBox.css({
height: ‘auto’,
paddingBottom: parseInt($(".dialogContentText").css("paddingTop")) + 10 + ‘px’,
})
dialogBox.css(‘marginTop’, -dialogBox.outerHeight() / 2);
$(".dialogMask").addClass(‘visible’);
_this.effects[config.effect][‘eleShow’]($(".dialogBox"));
$(".dialogButtons a").click(function() {
if (config.callback) config.callback();
setTimeout(function() {
$(".dialogMask").removeClass(‘visible’);
}, speed)
_this.effects[config.effect][‘eleHide’]($(".dialogBox"));
setTimeout(function() {
$(".dialogBox").parent().remove();
}, 500)
});
}
if (config.type == ‘modal’) {
if (config.title.replace(/^\s+|\s+$/g, "") != "") {
if ($(".dialogTitle").length == 0) $("<div class=’dialogTitle’>" + config.title + "</div>").insertBefore($(".dialogContent"));
}
if ($(".dialogcloseBtn").length == 0) $("<a href=’javascript:;’ class=’dialogcloseBtn’ >×</a>").appendTo($(".dialogBox"));
if (/^[#\.]\w+/g.test(config.content.replace(/^\s+|\s|$/g, ""))) {
$(".dialogContent").html($(config.content).html());
} else if (config.content.replace(/^\s+$/g, "") == "") {
alert(‘参数设置不能为空!’);
dialogBox.parent().remove();
return;
} else if (/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/.test(config.content)) {
var html = "";
html += "<iframe src=’" + config.content + "’ width=’100%’ height=’" + (dialogBox.innerHeight() – $(".dialogTitle").outerHeight() – parseInt($(".dialogContent").css("paddingTop")) * 3) + "’ frameborder=0 ></iframe>";
$(".dialogContent").html(html);
} else {
if ($(".dialogModalText").length == 0) $("<div class=’dialogModalText’></div>").html(config.content).appendTo($(".dialogContent"));
}
$(".dialogMask").addClass(‘visible’);
$(".dialogBox").css("height", config.height)
_this.effects[config.effect][‘eleShow’]($(".dialogBox"));
$(".dialogcloseBtn").click(function() {
if (config.callback) config.callback();
setTimeout(function() {
$(".dialogMask").removeClass(‘visible’);
}, speed)
_this.effects[config.effect][‘eleHide’]($(".dialogBox"));
setTimeout(function() {
$(".dialogBox").parent().remove();
}, 500)
});
}
_this.darg();
})
},
effects: {
"default": {
eleShow: function(obj) {
obj.show();
},
eleHide: function(obj) {
obj.css({
top: ‘50%’,
left: ‘50%’,
marginLeft: -(obj.outerWidth() / 2),
marginTop: -(obj.outerHeight() / 2),
})
}
},
"bounceY": {
eleShow: function(obj) {
obj.show();
obj.addClass(‘bounceInDown’);
},
eleHide: function(obj) {
obj.addClass(‘bounceOutDown’);
setTimeout(function() {
obj.removeClass(‘bounceOutDown’);
// 消失后回到中心位置
obj.css({
top: ‘50%’,
left: ‘50%’,
marginLeft: -(obj.outerWidth() / 2),
marginTop: -(obj.outerHeight() / 2),
})
}, 500)
}
},
"bounceX": {
eleShow: function(obj) {
obj.show();
obj.addClass(‘bounceInLeft’);
},
eleHide: function(obj) {
obj.addClass(‘bounceOutRight’);
setTimeout(function() {
obj.removeClass(‘bounceOutRight’);
obj.css({
top: ‘50%’,
left: ‘50%’,
marginLeft: -(obj.outerWidth() / 2),
marginTop: -(obj.outerHeight() / 2),
})
}, 500)
}
},
"scale": {
eleShow: function(obj) {
obj.show();
obj.addClass(‘sacleIn’);
},
eleHide: function(obj) {
obj.addClass(‘sacleOut’);
setTimeout(function() {
obj.removeClass(‘sacleOut’);
obj.css({
top: ‘50%’,
left: ‘50%’,
marginLeft: -(obj.outerWidth() / 2),
marginTop: -(obj.outerHeight() / 2),
})
}, 500)
}
}
},
darg: function() {
var isDown = false;
var dargBar = $(".dialogTitle");
var dargBox = $(".dialogBox");
// 按下坐标,移动时候的坐标,偏移量,设置的坐标
var startX, startY, currentX, currentY, distanceX, distanceY, x, y;
var dragBarLeft, dragBarTop;
if (this.config.isDrag==true && dargBar) {
dargBar.on("mousemove", function() {
$(this).css("cursor", "move");
})
dargBar.on(‘mousedown’, function(event) {
isDown = true;
startX = event.pageX;
startY = event.pageY;
dragBarLeft = dargBox.offset().left;
dragBarTop = dargBox.offset().top;
distanceX = startX – dragBarLeft + $(window).scrollLeft();
distanceY = startY – dragBarTop + $(window).scrollTop();
})
$(document).on("mousemove", function(event) {
if (isDown == true) {
currentX = event.pageX;
currentY = event.pageY;
x = currentX – distanceX;
y = currentY – distanceY;
var w = $(window).innerWidth() – dargBox.outerWidth();
var h = $(window).innerHeight() – dargBox.outerHeight();
x = Math.min(w, Math.max(0, x));
y = Math.min(h, Math.max(0, y));
dargBox.css({
left: x,
top: y,
margin: ‘0’
})
} else {
return
}
})
$(document).on("mouseup", function() {
isDown = false
})
}
}
}
$.fn.easyDialog = function(options) {
return new EasyDialog(this,options).init();
}
})(jquery)
// 调用
$(".btn1").easyDialog()
$(".btn2").easyDialog({
width:400,
msg:’带回调函数的alert弹出框’,
buttons:[‘ok’],
buttonClass:[‘success’],
callback:function(){
alert("你点击了按钮")
}
})
$(".btn3").easyDialog({
width:400,
msg:’多个按钮的alert弹出框’,
buttons:[‘确定’,’取消’],
buttonClass:[‘danger’,’default’]
})
$(".btn4").easyDialog({
buttons:”,
})
$(".btn5").easyDialog({
width: 500,
height: 400,
borderRadius:10,
type: ‘modal’,
title:"可拖拽的模态框",
content: ‘.a’,
effect: ‘bounceY’,
isDrag: true
})
$(".btn6").easyDialog({
width: 800,
height: 600,
borderRadius:10,
type: ‘modal’,
content: ‘http://www.w3cfuns.com’,
effect: ‘bounceX’,
isDrag: true
})
</script>
</body>
</html>
此插件的弹出类型为两种:alert和modal,支持iframe,并且提供了可拖拽功能,弹出的效果有default,bounceY,bounceX,scale四种效果,来看看插件的默认参数配置:
javascript 代码
插件的调用方法:
javascript 代码
来看下具体的插件内容:
javascript 代码
});
if ($(".dialogContent").length == 0) dialogContent.appendTo(dialogBox);
if ($(".dialogMask").length == 0) {
dialogBox.wrap(‘<div class="dialogMask"></div>’)
} else {
$(".dialogMask").show();
};
}
var _this = this;
var speed = config.effect == ‘default’ ? 0 : 200;
this.ele.on("click", function() {
createHTML();
if (config.type == ‘alert’) {
$(".dialogTitle").remove();
if (config.msg.replace(/^\s+|\s+$/g, "") != "") {
if ($(".dialogContentText").length == 0) $("<div class=’dialogContentText’>" + config.msg + "</div>").appendTo($(".dialogContent"));
} else {
alert("msg参数设置不能为空");
return;
}
// 定时关闭
if ($.isArray(config.buttons) == true && config.buttons.length > 0) {
if ($(".dialogButtons").length == 0) {
$("<div class=’dialogButtons’></div>").appendTo($(".dialogContent"));
var html = ”;
for (var i = 0; i < config.buttons.length; i++) {
html += "<a href=’javascript:;’ class=’" + config.buttonClass[i] + "’>" + config.buttons[i] + "</a>";
}
$(".dialogButtons").html(html);
}
} else if (config.buttons.replace(/^\s+|\s+$/g, "") == "") {
if ($(".dialogTime").length == 0) $(".dialogContentText").after(‘<div class=\’dialogTime\’ style=\’text-align:center;\’><span>’ + config.seconds + ‘</span>秒后关闭</div>’);
var s = config.seconds;
var timer = null;
timer = setInterval(function() {
s–;
if (s == 0) {
clearInterval(timer);
_this.effects[config.effect][‘eleHide’]($(".dialogBox"));
setTimeout(function() {
$(".dialogBox").parent().remove();
}, 500)
}
$(".dialogTime span").text(s);
}, 1000);
$(".dialogTime span").text(config.seconds);
} else {
alert("buttons参数设置错误,只能设置为数组或空");
return;
}
dialogBox.css({
height: ‘auto’,
paddingBottom: parseInt($(".dialogContentText").css("paddingTop")) + 10 + ‘px’,
})
dialogBox.css(‘marginTop’, -dialogBox.outerHeight() / 2);
$(".dialogMask").addClass(‘visible’);
_this.effects[config.effect][‘eleShow’]($(".dialogBox"));
$(".dialogButtons a").click(function() {
if (config.callback) config.callback();
setTimeout(function() {
$(".dialogMask").removeClass(‘visible’);
}, speed)
_this.effects[config.effect][‘eleHide’]($(".dialogBox"));
setTimeout(function() {
$(".dialogBox").parent().remove();
}, 500)
});
}
if (config.type == ‘modal’) {
if (config.title.replace(/^\s+|\s+$/g, "") != "") {
if ($(".dialogTitle").length == 0) $("<div class=’dialogTitle’>" + config.title + "</div>").insertBefore($(".dialogContent"));
}
if ($(".dialogcloseBtn").length == 0) $("<a href=’javascript:;’ class=’dialogcloseBtn’ >×</a>").appendTo($(".dialogBox"));
if (/^[#\.]\w+/g.test(config.content.replace(/^\s+|\s|$/g, ""))) {
$(".dialogContent").html($(config.content).html());
} else if (config.content.replace(/^\s+$/g, "") == "") {
alert(‘参数设置不能为空!’);
dialogBox.parent().remove();
return;
} else if (/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/.test(config.content)) {
var html = "";
html += "<iframe src=’" + config.content + "’ width=’100%’ height=’" + (dialogBox.innerHeight() – $(".dialogTitle").outerHeight() – parseInt($(".dialogContent").css("paddingTop")) * 3) + "’ frameborder=0 ></iframe>";
$(".dialogContent").html(html);
} else {
if ($(".dialogModalText").length == 0) $("<div class=’dialogModalText’></div>").html(config.content).appendTo($(".dialogContent"));
}
$(".dialogMask").addClass(‘visible’);
$(".dialogBox").css("height", config.height)
_this.effects[config.effect][‘eleShow’]($(".dialogBox"));
$(".dialogcloseBtn").click(function() {
if (config.callback) config.callback();
setTimeout(function() {
$(".dialogMask").removeClass(‘visible’);
}, speed)
_this.effects[config.effect][‘eleHide’]($(".dialogBox"));
setTimeout(function() {
$(".dialogBox").parent().remove();
}, 500)
});
}
_this.darg();
})
},
effects: {
"default": {
eleShow: function(obj) {
obj.show();
},
eleHide: function(obj) {
obj.css({
top: ‘50%’,
left: ‘50%’,
marginLeft: -(obj.outerWidth() / 2),
marginTop: -(obj.outerHeight() / 2),
})
}
},
"bounceY": {
eleShow: function(obj) {
obj.show();
obj.addClass(‘bounceInDown’);
},
eleHide: function(obj) {
obj.addClass(‘bounceOutDown’);
setTimeout(function() {
obj.removeClass(‘bounceOutDown’);
// 消失后回到中心位置
obj.css({
top: ‘50%’,
left: ‘50%’,
marginLeft: -(obj.outerWidth() / 2),
marginTop: -(obj.outerHeight() / 2),
})
}, 500)
}
},
"bounceX": {
eleShow: function(obj) {
obj.show();
obj.addClass(‘bounceInLeft’);
},
eleHide: function(obj) {
obj.addClass(‘bounceOutRight’);
setTimeout(function() {
obj.removeClass(‘bounceOutRight’);
obj.css({
top: ‘50%’,
left: ‘50%’,
marginLeft: -(obj.outerWidth() / 2),
marginTop: -(obj.outerHeight() / 2),
})
}, 500)
}
},
"scale": {
eleShow: function(obj) {
obj.show();
obj.addClass(‘sacleIn’);
},
eleHide: function(obj) {
obj.addClass(‘sacleOut’);
setTimeout(function() {
obj.removeClass(‘sacleOut’);
obj.css({
top: ‘50%’,
left: ‘50%’,
marginLeft: -(obj.outerWidth() / 2),
marginTop: -(obj.outerHeight() / 2),
})
}, 500)
}
}
},
darg: function() {
var isDown = false;
var dargBar = $(".dialogTitle");
var dargBox = $(".dialogBox");
// 按下坐标,移动时候的坐标,偏移量,设置的坐标
var startX, startY, currentX, currentY, distanceX, distanceY, x, y;
var dragBarLeft, dragBarTop;
if (this.config.isDrag==true && dargBar) {
dargBar.on("mousemove", function() {
$(this).css("cursor", "move");
})
dargBar.on(‘mousedown’, function(event) {
isDown = true;
startX = event.pageX;
startY = event.pageY;
dragBarLeft = dargBox.offset().left;
dragBarTop = dargBox.offset().top;
distanceX = startX – dragBarLeft + $(window).scrollLeft();
distanceY = startY – dragBarTop + $(window).scrollTop();
})
$(document).on("mousemove", function(event) {
if (isDown == true) {
currentX = event.pageX;
currentY = event.pageY;
x = currentX – distanceX;
y = currentY – distanceY;
var w = $(window).innerWidth() – dargBox.outerWidth();
var h = $(window).innerHeight() – dargBox.outerHeight();
x = Math.min(w, Math.max(0, x));
y = Math.min(h, Math.max(0, y));
dargBox.css({
left: x,
top: y,
margin: ‘0’
})
} else {
return
}
})
$(document).on("mouseup", function() {
isDown = false
})
}
}
}
$.fn.easyDialog = function(options) {
return new EasyDialog(this,options).init();
}
})(jQuery)
以上为纯jquery dialog插件, 关于require.js版本的,由于是模板引入的,所以无法看到具体的demo效果,只来看看它的入口js文件
javascript 代码
插件的下载地址点击这里:
轻量级基于require.js实现的jquery dialog弹窗插件;,压缩包内有两个版本的,一个纯jquery,一个是require.js版本,有需要的可以自行下载,如果觉得插件不错的,可以给我点个赞,另外,时间比较仓促,如有bug,欢迎指正!
注意:本插件不兼容ie8以下浏览器,请用firefox或chrome看效果!
评论前必须登录!
注册