自定义web弹窗/层:简易风格的msg与可拖放的dialog,生成博客园文章目录弹窗

  前言

  做过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
     */
    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) {
                    var newWidth = (dialogDiv.resize.width + (eveX - offset.x));
                    if (dialogDiv.resize.initWidth >= newWidth) {
                        newWidth = dialogDiv.resize.initWidth;
                    }
                    var newHeight = (dialogDiv.resize.height + (eveY - offset.y));
                    if (dialogDiv.resize.initHeight >= newHeight) {
                        newHeight = dialogDiv.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.resize.width = dialogDiv.width(); dialogDiv.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"; }); }, /** * 是否存在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 = "<div class='tip tip-msg'>" + text + "</div>"; //删除旧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:"测试弹窗标题",content:"<h1>测试弹窗内容</h1>",offset: ['100px', '50px'],area:["200px","100px"],shade:0}); */ dialog: function (setting) { var title = setting.title || "这里是标题"; // 标题 var content = setting.content || "这里是内容"; // 内容 var area = setting.area || ['393px', '222px']; // 宽高 var offset = setting.offset || "auto" // 位置 上、左 var shade = setting.shade != undefined ? setting.shade : 0.7;//遮阴 为0时无遮阴对象 //组装HTML var tip = "<div>\n" + " <!-- 遮阴层 -->\n" + " <div class=\"tip tip-shade\"></div>\n" + " <!-- 主体 -->\n" + " <div class=\"tip tip-dialog\">\n" + " <!-- 标题 -->\n" + " <div class=\"tip tip-title\">\n" + " <h2 class=\"tip tip-title-text\"></h2>\n" + " <div class=\"tip tip-title-btn\">\n" + " <button class=\"tip tip-title-min\" title=\"最小化\">--</button>\n" + " <button class=\"tip tip-title-max\" title=\"最大化\">O</button>\n" + " <button class=\"tip tip-title-close\" title=\"关闭\">X</button>\n" + " </div>\n" + " </div>\n" + " <!-- 窗口内容 -->\n" + " <div class=\"tip tip-content\"></div>\n" + " <!-- 右下角改变窗口大小 -->\n" + " <div class=\"tip tip-resize\"></div>\n" + " </div>\n" + "</div>"; 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").text(title); //内容 $tip.find(".tip-content").append(content); //设置初始宽高 $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] }); } //初始值宽高 $tip.resize.initWidth = $tip.width(); $tip.resize.initHeight = $tip.find(".tip-content").height(); } };

 

  调用

    //初始化
    tip.init();

    // tip提示
    tip.msg("哈哈哈哈哈");
    tip.msg({text:"哈哈哈哈哈",time:5000});

    //可拖放窗口
    tip.dialog({title:"测试弹窗标题",content:"测试弹窗内容"});
    tip.dialog({title:"测试弹窗标题",content:"<h1>测试弹窗内容</h1>",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、生成目录索引,把下面的代码也添加进去

    //初始化自定义弹窗
    tip.init(); 
 
  //锚点信息数组
    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<navCategoryAnchor.length;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('<a name="_labelTop"></a>');
            
            var content    = '<div id="navCategory">';
            content    += '<ul>';
            //一级标题
            for(var i =0;i<h2_list.length;i++){
                var h2_id = "_label_h2" + i;
                var h2_text = $(h2_list[i]).text();
                //去左右空格;
                h2_text = h2_text.replace(/(^\s*)|(\s*$)/g, "");
                $(h2_list[i]).attr("id",h2_id);
                //锚点位置
                navCategoryAnchor.push({a:h2_id+"_a",offset:$(h2_list[i]).offset().top});
                content += '<li><a id="'+h2_id+'_a" href="#' + h2_id + '">' + h2_text + '</a></li>';
                //目录的二级标题,找到所有的h3
                var h3_list = $(h2_list[i]).nextAll("h3");

                for(var j=0; j<h3_list.length; j++){
                    var tmp = $(h3_list[j]).prevAll('h2').first();
                    if(!tmp.is(h2_list[i])){
                        break;
                    }
                    var h3_id = "_label_h3_" + i + "_" + j;
                    var h3_text = $(h3_list[j]).text();
                    //去左右空格;
                    h3_text = h3_text .replace(/(^\s*)|(\s*$)/g, "");
                    $(h3_list[j]).attr("id",h3_id);
                    //锚点位置
                    navCategoryAnchor.push({a:h3_id+"_a",offset:$(h3_list[j]).offset().top});
                    content += '<li style="padding-left: 25px"><a id="'+h3_id+'_a" href="#' + h3_id + '">' + h3_text + '</a></li>';
                }
            }
            content += '</ul>';
            content += '</div>';
            
            //生成目录拖拽弹窗
            tip.dialog({title:"目录",content:content,offset: ['40%', '10%'],area:["156px","250px"],shade:0});
        }    
    }

    $(function($){
        //执行代码
        GenerateContentList();
    })

 

    我们这里一级标题对应的是h2,二级标题对应的是h3,而且目前只有两个标题;生成目录的简单思路是:在每个h2、h3标签都添加一个唯一id,然后生成对应的a标签链接过去,例如:

  <h2 id="_label_h20">  前言</h2>     

  <a id="_label_h20_a" href="#_label_h20">前言</a>

  最后将拼接成的HTML字符串传入我们的tip.dialog方法,生成目录弹窗

 

posted @ 2018-12-07 11:55 huanzi-qch 阅读(...) 评论(...) 编辑 收藏