前言
做过web项目开发的人对layer弹层组件肯定不陌生,作为layUI的一个重要组件,使用简单、接口参数丰富,功能健壮,深受广大开发者的喜爱,作为一个热(经)爱(常)工(划)作(水),喜欢钻研探索技术的程序员(狗),我们自己来实现一个web弹窗/层,一窥layer的本源(/手动滑稽脸),进步,从模仿开始。
首先,模仿layer的部分功能,我们先确定下我们要实现的功能:
msg
1、居中弹出、延时销毁、自适应宽高、支持参数配置
dialog
1、可拖动
2、可最小化、最大化、关闭
3、右下角可对窗口进行缩放
4、支持多个参数配置、扩展
代码编写
大部分的思路都在代码注释里
css样式
/* web弹窗 */ .tip-msg { background-color: rgba(61, 61, 61, 0.93); color: #ffffff; opacity: 0; max-width: 200px; position: fixed; text-align: center; line-height: 25px; border-radius: 30px; padding: 5px 15px; display: inline-block; } .tip-shade { z-index: 9999; background-color: rgb(0, 0, 0); opacity: 0.6; position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .tip-dialog { z-index: 10000; position: fixed; display: block; background: #e9e9e9; border-radius: 5px; opacity: 0; border: 1px solid #dad8d8; box-shadow: 0px 1px 20px 2px rgb(255, 221, 221); } .tip-title { cursor: move; padding: 5px; position: relative; height: 25px; border-bottom: 1px solid #dad8d8; user-select: none; } .tip-title-text { margin: 0; padding: 0; font-size: 15px; } .tip-title-btn { position: absolute; top: 5px; right: 5px; } .tip-content { padding: 8px; position: relative; word-break: break-all; font-size: 14px; overflow-x: hidden; overflow-y: auto; } .tip-resize { position: absolute; width: 15px; height: 15px; right: 0; bottom: 0; cursor: se-resize; }
js
/** * 自定义web弹窗/层:简易风格的msg与可拖放的dialog * 依赖jquery * 作者:https://www.cnblogs.com/huanzi-qch/ * 出处:https://www.cnblogs.com/huanzi-qch/p/10082116.html */ var tip = { /** * 初始化 */ init: function () { var titleDiv = null;//标题元素 var dialogDiv = null;//窗口元素 var titleDown = false;//是否在标题元素按下鼠标 var resizeDown = false;//是否在缩放元素按下鼠标 var offset = {x: 0, y: 0};//鼠标按下时的坐标系/计算后的坐标 /* 使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。 问题:事件绑定在div上出现div移动速度跟不上鼠标速度,导致鼠标移动太快时会脱离div,从而无法触发事件。 解决:把事件绑定在document文档上,无论鼠标在怎么移动,始终是在文档范围之内。 */ //鼠标在标题元素按下 $(document).on("mousedown", ".tip-title", function (e) { var event1 = e || window.event; titleDiv = $(this); dialogDiv = titleDiv.parent(); titleDown = true; offset.x = e.clientX - parseFloat(dialogDiv.css("left")); offset.y = e.clientY - parseFloat(dialogDiv.css("top")); }); //鼠标移动 $(document).on("mousemove", function (e) { var event2 = e || window.event; var eveX = event2.clientX; // 获取鼠标相对于浏览器x轴的位置 var eveY = event2.clientY; // 获取鼠标相对于浏览器Y轴的位置 // var height = document.body.clientHeight;//表示HTML文档所在窗口的当前高度; // var width = document.body.clientWidth;//表示HTML文档所在窗口的当前宽度; var height = window.innerHeight;//浏览器窗口的内部高度; var width = window.innerWidth;//浏览器窗口的内部宽度; //在标题元素按下 if (titleDown) { //处理滚动条 if (tip.hasXScrollbar()) { height = height - tip.getScrollbarWidth(); } if (tip.hasYScrollbar()) { width = width - tip.getScrollbarWidth(); } //上边 var top = (eveY - offset.y); if (top <= 0) { top = 0; } if (top >= (height - dialogDiv.height())) { top = height - dialogDiv.height() - 5; } //左边 var left = (eveX - offset.x); if (left <= 0) { left = 0; } if (left >= (width - dialogDiv.width())) { left = width - dialogDiv.width() - 5; } dialogDiv.css({ "top": top + "px", "left": left + "px" }); } //在缩放元素按下 if (resizeDown) { //避免undefined.XXX报错 dialogDiv[0].resize = dialogDiv[0].resize ? dialogDiv[0].resize : {}; var newWidth = (dialogDiv[0].resize.width + (eveX - offset.x)); if (dialogDiv[0].resize.initWidth >= newWidth) { newWidth = dialogDiv[0].resize.initWidth; } var newHeight = (dialogDiv[0].resize.height + (eveY - offset.y)); if (dialogDiv[0].resize.initHeight >= newHeight) { newHeight = dialogDiv[0].resize.initHeight; } dialogDiv.css("width", newWidth + "px"); dialogDiv.find(".tip-content").css("height", newHeight + "px"); } }); //鼠标弹起 $(document).on("mouseup", function (e) { //清空对象 titleDown = false; resizeDown = false; titleDiv = null; dialogDiv = null; offset = {x: 0, y: 0}; }); //阻止按钮事件冒泡 $(document).on("mousedown", ".tip-title-min,.tip-title-max,.tip-title-close", function (e) { e.stopPropagation();//阻止事件冒泡 }); //最小化 $(document).on("click", ".tip-title-min", function (e) { // var height = document.body.clientHeight;//表示HTML文档所在窗口的当前高度; // var width = document.body.clientWidth;//表示HTML文档所在窗口的当前宽度; var height = window.innerHeight;//浏览器窗口的内部高度; var width = window.innerWidth;//浏览器窗口的内部宽度; var $parent = $(this).parents(".tip-dialog"); //显示浏览器滚动条 document.body.parentNode.style.overflowY = "auto"; //当前是否为最大化 if ($parent[0].isMax) { $parent[0].isMax = false; $parent.css({ "top": $parent[0].topMin, "left": $parent[0].leftMin, "height": $parent[0].heightMin, "width": $parent[0].widthMin }); } //当前是否为最小化 if (!$parent[0].isMin) { $parent[0].isMin = true; $parent[0].bottomMin = $parent.css("bottom"); $parent[0].leftMin = $parent.css("left"); $parent[0].heightMin = $parent.css("height"); $parent[0].widthMin = $parent.css("width"); $parent.css({ "top": "", "bottom": "5px", "left": 0, "height": "30px", "width": "95px" }); $parent.find(".tip-title-text").css("display", "none"); $parent.find(".tip-content").css("display", "none"); } else { $parent[0].isMin = false; $parent.css({ "top": $parent[0].topMin, "bottom": $parent[0].bottomMin, "left": $parent[0].leftMin, "height": $parent[0].heightMin, "width": $parent[0].widthMin }); $parent.find(".tip-title-text").css("display", "block"); $parent.find(".tip-content").css("display", "block"); } }); //最大化 $(document).on("click", ".tip-title-max", function (e) { // var height = document.body.clientHeight;//表示HTML文档所在窗口的当前高度; // var width = document.body.clientWidth;//表示HTML文档所在窗口的当前宽度; var height = window.innerHeight;//浏览器窗口的内部高度; var width = window.innerWidth;//浏览器窗口的内部宽度; var $parent = $(this).parents(".tip-dialog"); //当前是否为最小化 if ($parent[0].isMin) { $parent[0].isMin = false; $parent.css({ "top": $parent[0].topMin, "bottom": $parent[0].bottomMin, "left": $parent[0].leftMin, "height": $parent[0].heightMin, "width": $parent[0].widthMin }); $parent.find(".tip-title h2").css("display", "block"); } //当前是否为最大化 if (!$parent[0].isMax) { //隐藏浏览器滚动条 document.body.parentNode.style.overflowY = "hidden"; $parent[0].isMax = true; $parent[0].topMin = $parent.css("top"); $parent[0].leftMin = $parent.css("left"); $parent[0].heightMin = $parent.css("height"); $parent[0].widthMin = $parent.css("width"); $parent.css({ "top": 0, "left": 0, "height": height - 5 + "px", "width": width - 5 + "px" }); } else { //显示浏览器滚动条 document.body.parentNode.style.overflowY = "auto"; $parent[0].isMax = false; $parent.css({ "top": $parent[0].topMin, "left": $parent[0].leftMin, "height": $parent[0].heightMin, "width": $parent[0].widthMin }); } }); //缩放 $(document).on("mousedown", ".tip-resize", function (e) { var event1 = e || window.event; dialogDiv = $(this).parent(); resizeDown = true; offset.x = e.clientX; offset.y = e.clientY; //点击时的宽高 dialogDiv[0].resize.width = dialogDiv.width(); dialogDiv[0].resize.height = dialogDiv.find(".tip-content").height(); }); //关闭 $(document).on("click", ".tip-title-close", function (e) { $(this).parents(".tip-dialog").parent().remove(); //显示浏览器滚动条 document.body.parentNode.style.overflowY = "auto"; }); //点击窗口优先显示 $(document).on("click", ".tip-dialog", function (e) { $(".tip-dialog").css("z-index","9999"); $(this).css("z-index","10000"); }); }, /** * 是否存在X轴方向滚动条 */ hasXScrollbar: function () { return document.body.scrollWidth > (window.innerWidth || document.documentElement.clientWidth); }, /** * 是否存在Y轴方向滚动条 */ hasYScrollbar: function () { return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight); }, /** * 计算滚动条的宽度 */ getScrollbarWidth: function () { /* 思路:生成一个带滚动条的div,分析得到滚动条长度,然后过河拆桥 */ var scrollDiv = document.createElement("div"); scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;'; document.body.appendChild(scrollDiv); var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; document.body.removeChild(scrollDiv); return scrollbarWidth; }, /** * tip提示 * tip.msg("哈哈哈哈哈"); * tip.msg({text:"哈哈哈哈哈",time:5000}); */ msg: function (setting) { var time = setting.time || 2000; // 显示时间(毫秒) 默认延迟2秒关闭 var text = setting.text || setting; // 文本内容 //组装HTML var tip = "" + text + ""; //删除旧tip $(".tip-msg").remove(); //添加到body $("body").append(tip); //获取jq对象 var $tip = $(".tip-msg"); //动画过渡 $tip.animate({opacity: 1}, 500); //计算位置浏览器窗口上下、左右居中 // var height = document.body.clientHeight;//表示HTML文档所在窗口的当前高度; var width = document.body.clientWidth;//表示HTML文档所在窗口的当前宽度; var height = window.innerHeight;//浏览器窗口的内部高度; // var width = window.innerWidth;//浏览器窗口的内部宽度; width = ((width / 2) - ($tip.css("width").replace("px", "") / 2)) / width; height = ((height / 2) - ($tip.css("height").replace("px", "") / 2)) / height; $tip.css({ "top": (height * 100) + "%", "left": (width * 100) + "%" }); //延迟删除 setTimeout(function () { //动画过渡 $tip.animate({opacity: 0}, 500, function () { $tip.remove(); }); }, time); }, /** 可拖放窗口 tip.dialog({title:"测试弹窗标题",content:"测试弹窗内容"}); tip.dialog({ title:"测试弹窗标题", class:"myClassName", content:"测试弹窗内容
", offset: ['100px', '50px'], area:["200px","100px"], shade:0, callBack:function(){ console.log('弹窗已加载完毕'); }, closeCallBack:function(){ console.log('你点击了关闭按钮'); } }); */ dialog: function (setting) { var title = setting.title || "这里是标题"; // 标题 var clazz = setting.class || ""; // class var content = setting.content || "这里是内容"; // 内容 var area = setting.area; // 宽高 var offset = setting.offset || "auto"; // 位置 上、左 var shade = setting.shade !== undefined ? setting.shade : 0.7;//遮阴 为0时无遮阴对象 //组装HTML var tip = "\n" + " \n" + " \n" + " \n" + ""; var $tip = $(tip); //添加到body $("body").append($tip); //设置遮阴 $tip.find(".tip-shade").css("opacity", shade); if (shade === 0) { $tip.find(".tip-shade").css({ "width": "0", "height": "0" }); } //获取dialog对象 $tip = $tip.find(".tip-dialog"); //标题 $tip.find(".tip-title-text").html(title); //内容 $tip.find(".tip-content").append(content); //设置初始宽高 if (area) { $tip.css({ "width": area[0], }); $tip.find(".tip-content").css({ "height": area[1] }); } //动画过渡 $tip.animate({opacity: 1}, 500); //计算位置浏览器窗口上下、左右居中 if (offset === "auto") { // var height = document.body.clientHeight;//表示HTML文档所在窗口的当前高度; var width = document.body.clientWidth;//表示HTML文档所在窗口的当前宽度; var height = window.innerHeight;//浏览器窗口的内部高度; // var width = window.innerWidth;//浏览器窗口的内部宽度; width = ((width / 2) - ($tip.css("width").replace("px", "") / 2)) / width; height = ((height / 2) - ($tip.css("height").replace("px", "") / 2)) / height; $tip.css({ "top": (height * 100) + "%", "left": (width * 100) + "%" }); } else if (Array.isArray(offset)) { $tip.css({ "top": offset[0], "left": offset[1] }); } //初始值宽高 //避免undefined.XXX报错 $tip[0].resize = $tip[0].resize ? $tip[0].resize : {}; $tip[0].resize.initWidth = $tip.width(); $tip[0].resize.initHeight = $tip.find(".tip-content").height(); //绑定关闭按钮回调 if(setting.closeCallBack){ $(".tip-title-close").click(function (e) { setting.closeCallBack(); }); } //执行回调 setting.callBack && setting.callBack(); }, //生成目录弹窗,锚点信息数组 navCategoryAnchor : [], /** * 生成目录弹窗,支持到二级目录 * { * list1:$('#cnblogs_post_body h2'),//目录的一级标题集合(如何找到一级目录) * list2:"$list1.nextAll('h3')",//目录的二级标题集合,(如何从每个一级目录节点$list1下面找到二级目录) * offset: ['40%', '10%'],//弹窗位置 * area:["156px","250px"]//弹窗大小 * } */ generateContentList : function(setting){ setting.offset ? setting.offset : setting.offset = ['40%', '10%'];//弹窗位置 setting.area ? setting.area : setting.area = ["156px","250px"];//弹窗大小 //点击章节,滚动带动画效果 $("body").on("click","#navCategory a",function() { $("html, body").animate({ scrollTop: $($(this).attr("href")).offset().top - 100 + "px" }, 800); return false; }); //监听鼠标滚动事件 window.addEventListener('scroll', function () { //无需频繁的进行遍历判断 if(new Date().getTime() % 2 == 0){ var scrolled = document.documentElement.scrollTop || document.body.scrollTop for(var i = 0;i\n" + " \n" + "\n" + "\n" + " \n" + "\n" + " \n" + " \n" + " \n" + " \n" + "\n" + " \n" + " \n" + " \n" + "\n" + "){ if((i==0) ? (tip.navCategoryAnchor[i+1].offset >= scrolled) : (tip.navCategoryAnchor[i].offset <= scrolled && ((i == tip.navCategoryAnchor.length - 1) ? true : tip.navCategoryAnchor[i + 1].offset >= scrolled))){ $("#"+tip.navCategoryAnchor[i].a).css("color","#519cea"); }else{ $("#"+tip.navCategoryAnchor[i].a).css("color",""); } } } }); //生成目录索引列表 var h2_list = setting.list1;//目录的一级标题,找到所有h2 if(h2_list.length>0){ //返回顶部,元素之前追加 $("body").prepend(''); var content = ' '; //生成目录拖拽弹窗 tip.dialog({title:"目录",content:content,offset: setting.offset,area:setting.area,shade:0}); } } }; $(function(){ //初始化 tip.init(); });
调用
// tip提示 tip.msg("哈哈哈哈哈"); tip.msg({text:"哈哈哈哈哈",time:5000}); //可拖放窗口 tip.dialog({title:"测试弹窗标题",content:"测试弹窗内容"}); tip.dialog({title:"测试弹窗标题",content:"测试弹窗内容
",offset: ['100px', '50px'],area:["200px","100px"],shade:0});
效果演示
实时效果请看我的博客里面的目录、点赞功能、返回顶部(点击火箭)
msg
弹出、销毁有动画效果,设置了一个max-width,超出会换行,支持参数配置
dialog
可拖动、可最小化、最大化、关闭,右下角可进行缩放,支持参数配置,发光特效
总结
实现拖拽、缩放功能,主要是监听了document的mousedown,mousemove,mouseup事件,并对特殊元素进行特殊处理,一波骚操作,玩出了花(滑稽),从而实现我们想要的效果。
参考:
http://layer.layui.com/
http://www.17sucai.com/pins/demo-show?id=4218
https://www.cnblogs.com/nzbin/p/8117535.html
生成博客园目录
我们利用这个弹窗,生成博客园的博文目录。
1、我们需要向博客园官方申请js权限(个人主页 --> 设置 --> 博客设置);
2、把我们上面的代码添加进去
页首、页脚的意思就是我们的代码是嵌在页首还是页脚
3、生成目录索引,把下面的代码也添加进去
//锚点信息数组 var navCategoryAnchor = []; //点击章节,滚动带动画效果 $("body").on("click","#navCategory a",function() { $("html, body").animate({ scrollTop: $($(this).attr("href")).offset().top - 100 + "px" }, 800); return false; }); //监听鼠标滚动事件 window.addEventListener('scroll', function () { //无需频繁的进行遍历判断 if(new Date().getTime() % 2 == 0){ var scrolled = document.documentElement.scrollTop || document.body.scrollTop for(var i = 0;i){ if((i==0) ? (navCategoryAnchor[i+1].offset >= scrolled) : (navCategoryAnchor[i].offset <= scrolled && ((i == navCategoryAnchor.length - 1) ? true : navCategoryAnchor[i + 1].offset >= scrolled))){ $("#"+navCategoryAnchor[i].a).css("color","#519cea"); }else{ $("#"+navCategoryAnchor[i].a).css("color",""); } } } }); //生成目录索引列表 function GenerateContentList(){ var h2_list = $('#cnblogs_post_body h2');//目录的一级标题,找到所有h2 if(h2_list.length>0){ //返回顶部,元素之前追加 $("body").prepend(''); var content = ' '; //生成目录拖拽弹窗 tip.dialog({title:"目录",content:content,offset: ['40%', '10%'],area:["156px","250px"],shade:0}); } } $(function($){ //执行代码 GenerateContentList(); })
我们这里一级标题对应的是h2,二级标题对应的是h3,而且目前只有两个标题;生成目录的简单思路是:在每个h2、h3标签都添加一个唯一id,然后生成对应的a标签链接过去,例如:
前言
最后将拼接成的HTML字符串传入我们的tip.dialog方法,生成目录弹窗
终极封装
我把js代码跟css代码单独写成tip.js,tip.css,并上传到博客的文件管理那里,并且扩展了generateContentList方法:生成目录弹窗,支持到二级目录,现在想使用我们这个可拖动弹窗就很简单了,引入我们的文件即可使用tip对象,调用对应的方法
<link href="https://files.cnblogs.com/files/huanzi-qch/tip.css" rel="stylesheet"/> <script src="https://files.cnblogs.com/files/huanzi-qch/tip.js">script>
封装
var tip = { 省略其他代码... //生成目录弹窗,锚点信息数组 navCategoryAnchor : [], /** * 生成目录弹窗,支持到二级目录 * { * list1:$('#cnblogs_post_body h2'),//目录的一级标题集合(如何找到一级目录) * list2:"$list1.nextAll('h3')",//目录的二级标题集合,(如何从每个一级目录节点$list1下面找到二级目录) * offset: ['40%', '10%'],//弹窗位置 * area:["156px","250px"]//弹窗大小 * } */ generateContentList : function(setting){ setting.offset ? setting.offset : setting.offset = ['40%', '10%'];//弹窗位置 setting.area ? setting.area : setting.area = ["156px","250px"];//弹窗大小 //点击章节,滚动带动画效果 $("body").on("click","#navCategory a",function() { $("html, body").animate({ scrollTop: $($(this).attr("href")).offset().top - 100 + "px" }, 800); return false; }); //监听鼠标滚动事件 window.addEventListener('scroll', function () { //无需频繁的进行遍历判断 if(new Date().getTime() % 2 == 0){ var scrolled = document.documentElement.scrollTop || document.body.scrollTop for(var i = 0;i){ if((i==0) ? (tip.navCategoryAnchor[i+1].offset >= scrolled) : (tip.navCategoryAnchor[i].offset <= scrolled && ((i == tip.navCategoryAnchor.length - 1) ? true : tip.navCategoryAnchor[i + 1].offset >= scrolled))){ $("#"+tip.navCategoryAnchor[i].a).css("color","#519cea"); }else{ $("#"+tip.navCategoryAnchor[i].a).css("color",""); } } } }); //生成目录索引列表 var h2_list = setting.list1;//目录的一级标题,找到所有h2 if(h2_list.length>0){ //返回顶部,元素之前追加 $("body").prepend(''); var content = ' '; //生成目录拖拽弹窗 tip.dialog({title:"目录",content:content,offset: setting.offset,area:setting.area,shade:0}); } } };
直接调用生成目录弹窗方法
//生成目录弹窗 tip.generateContentList({ list1:$('#cnblogs_post_body h2'),//目录的一级标题集合(如何找到一级目录) list2:"$list1.nextAll('h3')",//目录的二级标题集合,(如何从每个一级目录节点$list1下面找到二级目录) offset: ['40%', '10%'],//弹窗位置 area:["156px","250px"]//弹窗大小 });
bug修复
1、2019-05-17;bug复现:当有多个弹窗且大小不一致,拖动其中一个弹窗进行缩放,会影响到其他弹窗,并且宽度变成跟最大的那个一样
问题分析:代码中我们使用 dialogDiv = titleDiv.parent(),是jq对象,通过一个小测试发现,$获取到的jq对象每次都是新的,jq对象里面的DOM对象才是唯一不变
所以我们把数据写在jq里面的dom对象就行了,但是如果更开始resize没有值的时候,undefined.width就会报错,这一点要注意
bug解决:使用jq对象里面的jsDOM对象,且在用的对象之前进行非空判断即可,我tip.js已经替换成最新代码,bug已经解决;
//避免undefined.XXX报错 dialogDiv[0].resize = dialogDiv[0].resize ? dialogDiv[0].resize : {};
创建弹窗时初始化最小宽高哪里也要改一下,同时也要先进行非空判断
//初始值宽高 //避免undefined.XXX报错 $tip[0].resize = $tip[0].resize ? $tip[0].resize : {}; $tip[0].resize.initWidth = $tip.width(); $tip[0].resize.initHeight = $tip.find(".tip-content").height();