轻量级基于require.js实现的jquery dialog弹窗插件；

由前端开发者 · 2018年11月6日15:14:14

摘要：最近项目当中运用到了dialog弹窗插件，本来是想在网上找一个随便用用，因为产品的需求，找来找去没发现比较合适的，于是乎，自己造起了轮子，此dialog插件基于jquery打造，加入了css3效果，由于项目中运用了requir……

最近项目当中运用到了dialog弹窗插件，本来是想在网上找一个随便用用，因为产品的需求，找来找去没发现比较合适的，于是乎，自己造起了轮子，此dialog插件基于jquery打造，加入了css3效果，由于项目中运用了require.js，所以写了一个require.js版本的，当然也有纯jquery版本的，先来看纯jquery版本的demo：

html 代码

<!DOCTYPE <a href="https://www.rokub.com/category/html" title="html">html</a>> <<a href="https://www.rokub.com/category/html" title="html">html</a> lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" > <title><a href="https://www.rokub.com/category/jquery" title="jquery">jquery</a>轻巧dialog弹出插件</title> <script src="http://apps.bdimg.com/libs/<a href="https://www.rokub.com/category/jquery" title="jquery">jquery</a>/1.10.1/jquery.min.<a href="https://www.rokub.com/category/javascript" title="js">js</a>"></script> <style> .btn{margin: 20px;display: block;width: 200px;text-align: center;} /* 插件<a href="https://www.rokub.com/category/css" title="css">css</a> 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);} } /* 插件<a href="https://www.rokub.com/category/css" title="css">css</a> 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;">我是内容</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.<a href="https://www.rokub.com/category/css" title="css">css</a>({ 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;\’>’ + config.seconds + ‘秒后关闭</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.<a href="https://www.rokub.com/category/css" title="css">css</a>({ height: ‘auto’, paddingBottom: parseInt($(".dialogContentText").<a href="https://www.rokub.com/category/css" title="css">css</a>("paddingTop")) + 10 + ‘px’, }) dialogBox.<a href="https://www.rokub.com/category/css" title="css">css</a>(‘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’ >&#215</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").<a href="https://www.rokub.com/category/css" title="css">css</a>("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 代码

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 }

插件的调用方法：
javascript 代码

$(".btn1").easyDialog()

来看下具体的插件内容：
javascript 代码

;(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;\’>’ + config.seconds + ‘秒后关闭</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’ >&#215</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.config({ paths: { jquery: ‘http://apps.bdimg.com/libs/jquery/1.10.1/jquery.min’ } }) require([‘jquery’, ‘easyDialog’], function($, w) { w.easyDialog($(".btn1")).init(); w.easyDialog($(".btn2")).init({ width:400, msg:’带回调函数的alert弹出框’, buttons:[‘ok’], buttonClass:[‘success’], callback:function(){ alert("你点击了按钮") } }); w.easyDialog($(".btn3")).init({ width:’400′, msg:’多个按钮的alert弹出框’, buttons:[‘确定’,’取消’], buttonClass:[‘danger’,’default’] }); w.easyDialog($(".btn4")).init({ buttons:”, }); w.easyDialog($(".btn5")).init({ width: 500, height: 400, borderRadius:10, type: ‘modal’, title:"可拖拽的模态框", content: ‘.a’, effect: ‘bounceY’, isDrag: true }); w.easyDialog($(".btn6")).init({ width: 800, height: 600, borderRadius:10, type: ‘modal’, content: ‘http://www.w3cfuns.com’, effect: ‘bounceX’, isDrag: true }); })

插件的下载地址点击这里：

轻量级基于require.js实现的jquery dialog弹窗插件；,压缩包内有两个版本的，一个纯jquery，一个是require.js版本，有需要的可以自行下载，如果觉得插件不错的，可以给我点个赞，另外，时间比较仓促，如有bug，欢迎指正！

注意：本插件不兼容ie8以下浏览器，请用firefox或chrome看效果！

» 本文来自：前端开发者 » 《轻量级基于require.js实现的jquery dialog弹窗插件；》

» 本文链接地址：https://www.rokub.com/8839.html

» 您也可以订阅本站：https://www.rokub.com

轻量级基于require.js实现的jquery dialog弹窗插件；

You may also like...

发表评论取消回复

前端开发者/SEO-技术群/春运抢票群

近期文章

近期评论

分类目录

搜索文章

精选

联系方式

轻量级基于require.js实现的jquery dialog弹窗插件；

You may also like...

canvas 蓝胖子

web前端开发处理页脚保持在页面底部

web前端开发javascript常用函数封装整理

发表评论 取消回复

前端开发者/SEO-技术群/春运抢票群

近期文章

近期评论

分类目录

搜索文章

精选

联系方式

发表评论取消回复