最近在项目中用到弹出窗口的功能，花了一些时间，就想做一个通用点的弹出窗口，这样大家就可以拿去直接用。如果正好你也需要做一个弹出框的功能，这个代码正适合你。
一、弹窗效果
这个弹出窗是结合了搜集的资料后做出来的，基本的需求都满足了，支持的功能有：自适应，拖动窗口位置，拉动右、下、右下可以实现缩放，可以最大化和还原。大致效果，如下图所示：
image
二、HTML 代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi"> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <meta name="format-detection" content="telephone=no, email=no"/> <meta name="msapplication-tap-highlight" content="no"> <title>dialog demo</title> <link href="css/base.css" rel="stylesheet" type="text/css"> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery.min.js" type="text/javascript"></script> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/main.js" type="text/javascript"></script></head><body> <input id="btn_show_dialog" type="button" value="show dialog" class="btn" style="margin-left:50px; margin-top:100px"/> <!--弹出框--> <div id="dialog" class="dialog hide" minheight="320" minwidth="660"> <div id="dlg_top" class="dlg_top"> <img class="dlg_logo" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/ico_logo.png"/> <label class="dlg_title">弹出窗口</label> <input class="dlg_btn_close dlg_btn_ico dlg_btn_close_top" type="button"/> <input class="dlg_btn_ico dlg_btn_max_top" type="button"/> </div> <div class="dlg_content"> <label style="display:inline-block; margin:10px;line-height:26px;">稻盛和夫，1932年出生于日本鹿儿岛，鹿儿岛大学工学部毕业。27岁创办京都陶瓷株式会社（现名京瓷Kyocera），52岁创办第二电信（原名DDI，现名KDDI，目前在日本为仅次于NTT的第二大通讯公司），这两家公司又都在他的有生之年进入世界500强，两大事业皆以惊人的力道成长。 稻盛和夫的释义是涵盖了生活态度、哲学、思想、伦理观等因素人格。痛惜战后的日本以选择聪明才辩型的人做领导为潮流，忽略了道德规范和伦理标准，导致政界、商界丑闻频发。他建议领导者的选拔标准是德要高于才，也就是居人上者，人格第一，勇气第二，能力第三。他指出热爱是点燃工作激情的火把。无论什么工作，只要全力以赴去做就能产生很大的成就感和自信心，而且会产生向下一个目标挑战的积极性。成功的人往往都是那些沉醉于所做事的人。</label> </div> <div class="dlg_bottom"> <input id="dlg_submit" class="btn" type="button" value="提交" /> <input class="dlg_btn_close btn" type="button" value="关闭" /> </div> <div id="dlg_right"></div> <div id="dlg_right_bottom"></div> <div id="dlg_bottom"></div> </div></body>
三、CSS 代码
* { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-size: 14px; padding: 0; margin: 0; border: 0; list-style-type: none; -webkit-tap-highlight-color: rgba(0,0,0,0);
}img { border: none; vertical-align: middle;
}.hide { display: none;
}.left { float: left;
}/* 一般按钮 */.btn { cursor: pointer; color: #fff; border-color: #417FC8; background: -moz-linear-gradient(top,#4a90e2 0,#4a90e2 100%); background: -webkit-linear-gradient(top,#4a90e2 0,#4a90e2 100%); background: -o-linear-gradient(top,#4a90e2 0,#4a90e2 100%); background: -ms-linear-gradient(top,#4a90e2 0,#4a90e2 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A90E2', endColorstr='#4A90E2', GradientType=0); background: linear-gradient(top,#4a90e2 0,#4a90e2 100%); border-radius: 3px; height: 28px; line-height: 28px; padding: 0px 10px;
}/* 弹窗 */.dialog { width: 50%; position: absolute; top: 10%; left: 20%; z-index: 2; background: white; border-radius: 3px; border: 1px solid #eec;
}/* 弹窗上部 */.dlg_top { position: relative; height: 28px; z-index: 3; background: #f3f3f3; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom: 1px solid #eec; cursor: move;
}/* 弹窗右上角 ico */.dlg_btn_ico { float: right; background: transparent; background-size: cover; width: 20px; height: 20px; cursor: pointer; margin-right: 15px; margin-top: 5px; background-repeat: no-repeat;
}/* 弹窗右上角 ico 鼠标浮上去的样式 */.dlg_btn_ico:hover { background-color: #eee;
}/* 最小化 *//* .dlg_btn_min_top {
background-image: url(../images/ico_min.png);
} *//* 最大化 */.dlg_btn_max_top { background-image: url(../images/ico_max.png);
}/* 还原 */.dlg_btn_reback_top { background-image: url(../images/ico_reback.png);
}/* 关闭 */.dlg_btn_close_top { background-image: url(../images/ico_close.png);
}/* 左上角logo */.dlg_logo { margin-left: 5px; margin-top: -3px; width: 20px; height: 20px; display: inline-block;
vertical-align: middle;
}/* 弹窗标题 */.dlg_title { line-height: 28px; margin-left: 5px;
}/* 弹窗内容 */.dlg_content { position: relative; min-height: 300px; overflow-y: auto; margin-right: 4px;
}/* 弹窗底部 */.dlg_bottom { position: absolute; height: 35px; width: 100%; left: 0; bottom: 0; z-index: 3; padding-top: 5px; background: #f3f3f3; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; border-top: 1px solid #eec; text-align: center;
}/* 缩放时右拉块 */#dlg_right { width: 15px; height: 100%; float: right; position: absolute; right: 0; top: 0; cursor: e-resize; overflow: hidden; opacity: 0; z-index: 3;
}/* 缩放时下拉块 */#dlg_bottom { width:100%; height:15px; position:absolute; left:0; bottom:0; cursor:n-resize; overflow:hidden; opacity:0; z-index:3;
}/* 缩放时右下拉块 */#dlg_right_bottom{ width:15px; height:15px; position:absolute; right:0; bottom:0; cursor:nw-resize; overflow:hidden; font-size:12px; text-align:center; line-height:15px; float:right; z-index:4;
}四、JS 代码
// 最大化时保存弹窗的位置大小var preDialogWidth = 0;
var preDialogHeight = 0;var preDialogLeft = "0px";var preDialogTop = "0px";// 页面初始化$(function () { // 常用功能
$("#btn_show_dialog").bind("click", showDialog);
$(".dlg_btn_close").bind("click", hideDialog);
$("#dlg_submit").bind("click", submitHandler); // 移动
$("#dialog").bind("mousedown", moveHandler); // 最大化 || 还原
$(".dlg_btn_max_top").bind("click", maxDialog);
$(".dlg_btn_reback_top").bind("click", rebackDialog);
});// 还原function rebackDialog() {
el_dialog = $("#dialog")[0];
el_dialog.style.left = preDialogLeft;
el_dialog.style.top = preDialogTop;
el_dialog.style.width = preDialogWidth + "px";
el_dialog.style.height = preDialogHeight + "px";
$(this).blur();
$(this).removeClass("dlg_btn_reback_top").addClass("dlg_btn_max_top");
$(".dlg_btn_max_top").unbind("click").bind("click", maxDialog);
}// 最大化function maxDialog() {
el_dialog = $("#dialog")[0];
preDialogWidth = el_dialog.offsetWidth;
preDialogHeight = el_dialog.offsetHeight;
preDialogLeft = el_dialog.style.left;
preDialogTop = el_dialog.style.top;
el_dialog.style.left = 0 + "px";
el_dialog.style.top = 0 + "px";
el_dialog.style.width = window.innerWidth - 5 + "px";
el_dialog.style.height = window.innerHeight - 5 + "px";
$(this).blur();
$(this).removeClass("dlg_btn_max_top").addClass("dlg_btn_reback_top");
$(".dlg_btn_reback_top").unbind("click").bind("click", rebackDialog);
}// 移动function moveHandler(evt) { var $trgt = $(event.target); if (!$trgt.hasClass("dlg_top")) return; var $this = $(this); var el = $this[0]; var oevent = evt || event; var distanceX = oevent.clientX - el.offsetLeft; var distanceY = oevent.clientY - el.offsetTop;
$(document).bind("mousemove", function (evt) { var oevent = evt || event;
el.style.left = oevent.clientX - distanceX + 'px';
el.style.top = oevent.clientY - distanceY + 'px';
});
$(document).bind("mouseup", function () {
$(document).unbind("mousemove");
$(document).unbind("mouseup");
});
}// 显示弹窗function showDialog() {
$("#dialog").show();
}// 隐藏弹窗function hideDialog() {
$("#dialog").hide();
}// 提交事件function submitHandler() {
alert("submit success!");
}// 拖拽缩放：支持右拉 || 下拉 || 右下拉window. = function () { var el_dlg_right_bottom = document.getElementById("dlg_right_bottom"); var el_dialog = document.getElementById("dialog"); var minHeight = $(el_dialog).attr("minheight"); var minWidth = $(el_dialog).attr("minwidth"); var right = document.getElementById("dlg_right"); var bottom = document.getElementById("dlg_bottom"); var mouseStart = {}; var divStart = {}; var rightStart = {}; var bottomStart = {}; // drag from right
right.onmousedown = function (ev) { var oEvent = ev || event;
mouseStart.x = oEvent.clientX;
mouseStart.y = oEvent.clientY;
rightStart.x = right.offsetLeft; if (right.setCapture) {
right.onmousemove = doDragToRightBottomToRight;
right.onmouseup = stopDragToRightBottomToRight;
right.setCapture();
} else { document.addEventListener("mousemove", doDragToRightBottomToRight, true); document.addEventListener("mouseup", stopDragToRightBottomToRight, true);
}
}; function doDragToRightBottomToRight(ev) { var oEvent = ev || event; var l = oEvent.clientX - mouseStart.x + rightStart.x; var w = l + el_dlg_right_bottom.offsetWidth; if (w < el_dlg_right_bottom.offsetWidth) {
w = el_dlg_right_bottom.offsetWidth;
} else if (w > document.documentElement.clientWidth - el_dialog.offsetLeft) {
w = document.documentElement.clientWidth - el_dialog.offsetLeft - 2;
} if (w < minWidth) return;
el_dialog.style.width = w + "px";
}; function stopDragToRightBottomToRight() { if (right.releaseCapture) {
right.onmousemove = null;
right.onmouseup = null;
right.releaseCapture();
} else { document.removeEventListener("mousemove", doDragToRightBottomToRight, true); document.removeEventListener("mouseup", stopDragToRightBottomToRight, true);
}
}; // drag from bottom
bottom.onmousedown = function (ev) { var oEvent = ev || event;
mouseStart.x = oEvent.clientX;
mouseStart.y = oEvent.clientY;
bottomStart.y = bottom.offsetTop; if (bottom.setCapture) {
bottom.onmousemove = doDragToRightBottomToBottom;
bottom.onmouseup = stopDragToRightBottomToBottom;
bottom.setCapture();
} else { document.addEventListener("mousemove", doDragToRightBottomToBottom, true); document.addEventListener("mouseup", stopDragToRightBottomToBottom, true);
}
}; function doDragToRightBottomToBottom(ev) { var oEvent = ev || event; var t = oEvent.clientY - mouseStart.y + bottomStart.y; var h = t + el_dlg_right_bottom.offsetHeight; if (h < el_dlg_right_bottom.offsetHeight) {
h = el_dlg_right_bottom.offsetHeight;
} else if (h > document.documentElement.clientHeight - el_dialog.offsetTop) {
h = document.documentElement.clientHeight - el_dialog.offsetTop - 2;
} if (h < minHeight) return;
el_dialog.style.height = h + "px";
}; function stopDragToRightBottomToBottom() { if (bottom.releaseCapture) {
bottom.onmousemove = null;
bottom.onmouseup = null;
bottom.releaseCapture();
} else { document.removeEventListener("mousemove", doDragToRightBottomToBottom, true); document.removeEventListener("mouseup", stopDragToRightBottomToBottom, true);
}
}; // drag from right bottom
el_dlg_right_bottom.onmousedown = function (ev) { var oEvent = ev || event;
mouseStart.x = oEvent.clientX;
mouseStart.y = oEvent.clientY;
divStart.x = el_dlg_right_bottom.offsetLeft;
divStart.y = el_dlg_right_bottom.offsetTop; if (el_dlg_right_bottom.setCapture) {
el_dlg_right_bottom.onmousemove = doDragToRightBottom;
el_dlg_right_bottom.onmouseup = stopDragToRightBottom;
el_dlg_right_bottom.setCapture();
} else { document.addEventListener("mousemove", doDragToRightBottom, true); document.addEventListener("mouseup", stopDragToRightBottom, true);
}
}; function doDragToRightBottom(ev) { var oEvent = ev || event; var l = oEvent.clientX - mouseStart.x + divStart.x; var t = oEvent.clientY - mouseStart.y + divStart.y; var w = l + el_dlg_right_bottom.offsetWidth; var h = t + el_dlg_right_bottom.offsetHeight; if (w < el_dlg_right_bottom.offsetWidth) {
w = el_dlg_right_bottom.offsetWidth;
} else if (w > document.documentElement.clientWidth - el_dialog.offsetLeft) {
w = document.documentElement.clientWidth - el_dialog.offsetLeft - 2;
} if (h < el_dlg_right_bottom.offsetHeight) {
h = el_dlg_right_bottom.offsetHeight;
} else if (h > document.documentElement.clientHeight - el_dialog.offsetTop) {
h = document.documentElement.clientHeight - el_dialog.offsetTop - 2;
} if (w < minWidth) return;
el_dialog.style.width = w + "px"; if (h < minHeight) return;
el_dialog.style.height = h + "px";
}; function stopDragToRightBottom() { if (el_dlg_right_bottom.releaseCapture) {
el_dlg_right_bottom.onmousemove = null;
el_dlg_right_bottom.onmouseup = null;
el_dlg_right_bottom.releaseCapture();
} else { document.removeEventListener("mousemove", doDragToRightBottom, true); document.removeEventListener("mouseup", stopDragToRightBottom, true);
}
};
};五、结语
希望对您有用，愿您吉祥如意！
At 2018.04.26
作者：惜福_xifu_forever
链接：https://www.jianshu.com/p/e522ec8e01df
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦