使用jquery开发一个弹出框组件

作者: 郝艳峰Vip | 来源:发表于2022-01-27 16:28 被阅读0次

使用jquery开发一个弹出框组件
Bootstrap - 弹出框制作
做一个复用的开发组件 modal弹出框
Vant中Popover气泡弹出框位置错乱问题解决
vue-弹出框组件
解决 ng-zorro-antd 升级后 [Modal对话框]
灯箱效果插件Magnific Popup详解
Avoid mutating a prop directly s
Flutter开发 - 今日遇到的问题
iVIew对话框封装

前言

最近呢接手一个很古老的项目，就是没有用任何Ui框架的那种，正好要开发一个气泡弹出窗，心里一想是不是可以开发一个组件库，然后直接使用既不是完美，于是就开始折腾，好在最终搞出来了。

先说一下用到的一个知识点就是extend方法
$.fn.methods({})是对jquery.prototype进行扩展，用法再demo中会体现出来

直接上菜：

第一步：css

/*!
 * author:郝艳峰
 * description:jquery弹起气泡框组件css样式
 * time:2022-01-27
 */
        .hoverDiv {
            position: absolute;
            background: #fff;
            display: none;
        }

        .hoverDiv:before {
            box-sizing: content-box;
            width: 0px;
            height: 0px;
            position: absolute;
            padding: 0;
            display: block;
            content: '';
            z-index: 12;
        }

        .hoverDiv:after {
            box-sizing: content-box;
            width: 0px;
            height: 0px;
            position: absolute;
            padding: 0;
            display: block;
            content: '';
            z-index: 10
        }

        .hoverDiv.top:before {
            bottom: -16px;
            left: 50%;
            margin-left: -6px;
            border-top: 8px solid #FFFFFF;
            border-bottom: 8px solid transparent;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
        }

        .hoverDiv.top:after {
            bottom: -18px;
            left: 49.9%;
            margin-left: -7px;
            border-top: 9px solid #cccccc;
            border-bottom: 9px solid transparent;
            border-left: 9px solid transparent;
            border-right: 9px solid transparent;
        }

        .hoverDiv.bottom:before {
            top: -16px;
            left: 50%;
            margin-left: -6px;
            border-bottom: 8px solid #FFFFFF;
            border-top: 8px solid transparent;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
        }

        .hoverDiv.bottom:after {
            top: -18px;
            left: 49.9%;
            margin-left: -7px;
            border-bottom: 9px solid #cccccc;
            border-top: 9px solid transparent;
            border-left: 9px solid transparent;
            border-right: 9px solid transparent;
        }

        .hoverDiv.left:before {
            top: 50%;
            right: -16px;
            margin-top: -6px;
            border-left: 8px solid #FFFFFF;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-right: 8px solid transparent;
        }

        .hoverDiv.left:after {
            top: 50%;
            right: -18px;
            margin-top: -7px;
            border-left: 9px solid #cccccc;
            border-top: 9px solid transparent;
            border-bottom: 9px solid transparent;
            border-right: 9px solid transparent;
        }

        .hoverDiv.right:before {
            top: 50%;
            left: -16px;
            margin-top: -6px;
            border-right: 8px solid #FFFFFF;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-left: 8px solid transparent;
        }

        .hoverDiv.right:after {
            top: 50%;
            left: -18px;
            margin-top: -7px;
            border-right: 9px solid #cccccc;
            border-top: 9px solid transparent;
            border-bottom: 9px solid transparent;
            border-left: 9px solid transparent;
        }

第二步：js

/*!
 * author:郝艳峰
 * description:jquery弹起气泡框组件js
 * time:2022-01-27
 */
$(function () {
    $.fn.extend({
        hyfHover: function (hyfParams) {
            var parentContainer = $("<div class='parentDiv'></div>");
            this.wrap(parentContainer);
            const element = this.parent();
            for (let f = 0; f < element.length; f++) {
                element[f].addEventListener('mouseenter', function () {
                    var tipsContent = element[f].firstChild.getAttribute('tooltips');
                    var divSelf = $("<div class='hoverDiv'></div>");
                    divSelf.html(tipsContent == undefined ? hyfParams.content : tipsContent);
                    divSelf.css({
                        "width": !!hyfParams.width ? hyfParams.width : '',
                        "height": !!hyfParams.height ? hyfParams.height : '',
                        "color": !!hyfParams.selfColor ? hyfParams.selfColor : '#000',
                        "backgroundColor": !!hyfParams.selfBgColor ? hyfParams.selfBgColor : '#fff',
                        "box-shadow": !!hyfParams.selfShadow ? hyfParams.selfShadow : '0 0 9px 3px #ccc',
                    })
                    divSelf.appendTo(element[f])
                    let suspensionWidth = divSelf.appendTo(element[f]).width();
                    let suspensionHeight = divSelf.appendTo(element[f]).height();
                    switch (hyfParams.position) {
                        case 'top':
                            element[f].lastChild.classList.add("top");
                            element[f].lastChild.style.top = `${element[f].firstChild.offsetTop - suspensionHeight - 8}px`;
                            element[f].lastChild.style.left = `${element[f].firstChild.offsetLeft - (suspensionWidth/2) + (element[f].firstChild.offsetWidth / 2)}px`;
                            break;
                        case 'left':
                            element[f].lastChild.classList.add("left");
                            element[f].lastChild.style.left = `${element[f].firstChild.offsetLeft - suspensionWidth - 8}px`;
                            let hyfHeight = 10;
                            if (hyfParams.height > element[f].firstChild.offsetHeight) {
                                hyfHeight = `${element[f].firstChild.offsetTop - (hyfParams.height/2) + (element[f].firstChild.offsetHeight / 2)}`;
                            } else {
                                hyfHeight = `${element[f].firstChild.offsetTop + (element[f].firstChild.offsetHeight / 2) - 8}`;
                            }
                            element[f].lastChild.style.top = `${hyfHeight}px`;
                            break;
                        case 'bottom':
                            element[f].lastChild.classList.add("bottom");
                            element[f].lastChild.style.top = `${element[f].firstChild.offsetTop + element[f].firstChild.offsetHeight + 8}px`;
                            element[f].lastChild.style.left = `${element[f].firstChild.offsetLeft - (suspensionWidth/2) + (element[f].firstChild.offsetWidth / 2)}px`;
                            break;
                        case 'right':
                            element[f].lastChild.classList.add("right");
                            element[f].lastChild.style.left = `${element[f].firstChild.offsetLeft + element[f].firstChild.offsetWidth + 8}px`;
                            let hyfrightHeight = 10;
                            if (hyfParams.height > element[f].firstChild.offsetHeight) {
                                hyfrightHeight = `${element[f].firstChild.offsetTop - (hyfParams.height/2) + (element[f].firstChild.offsetHeight / 2)}`;
                            } else {
                                hyfrightHeight = `${element[f].firstChild.offsetTop + (element[f].firstChild.offsetHeight / 2) - 8}`;
                            }
                            element[f].lastChild.style.top = `${hyfrightHeight}px`;
                            break;
                    }
                    // firstChild代表$(".mouseHover")
                    // lastChild代表$(".hoverDiv")
                    element[f].lastChild.style.display = "block"
            
                })
                element[f].addEventListener('mouseleave', function () {
                    $(".parentDiv").find('.hoverDiv').remove();
                })
            }
        },

    })

});

第三步：index.html

一定要引入jquery,demo中hyfHover就是我暴露出来的方法

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>郝艳峰气泡框组件</title>
    <link rel="stylesheet" href="./css/index.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "Microsoft Yahei";
        }

        h1 {
            padding: 45px 0;
            font: 32px "Microsoft Yahei";
            text-align: center;
        }



        .self-html {
            color: #55b555;
            overflow-y: auto;
        }

        #tip5 {
            position: relative;
            border: 1px solid #55b555;
            margin-top: 200px;

        }

        .mouseHover {
            width: 100px;
            height: 30px;
            border: 1px solid red;
            cursor: pointer;
        }

        .parentDiv {
            display: inline-block;
        }
    </style>

</head>
<body>




    <div id="tip5">
        <p>好好说说拉开了将</p>

        <div class="mouseHover" tooltips="<div class='self-html'>这里是标签内的html这里是标签内的html这里是标签内的html--1</div>">1-四块五的妞</div>
        <p>好好说说拉开了将</p>
        <div class="mouseHover">2-四块五的妞</div>
        <p>好好说说拉开了将</p>

        <div style="margin-left: 239px;" class="mouseHover" tooltips="<div class='self-html'>这3</div>">3-四块五的妞</div>
    </div>

    <script src="./js/jquery@1.8.3.js"></script>
    <script src="./js/index.js"></script>

    <script>
    这里就是使用方法
        $(function () {

            $('.mouseHover').hyfHover({
                position: "right",
                width: 200,
                height: 300,
                content: "这里是本草纲目",
                speed: 1000,
                selfShadow: '0 0 9px 3px #ccc',
                selfColor: "red",
            });


        });
    </script>
</body>

</html>

第四步：参数说明

参数	描述	默认值	是否必填
position	弹出窗所在位置(top,left,right,bottom)	无	是
width	弹出窗宽度	auto	否
height	弹出窗高度	auto	否
selfBgColor	弹窗背景颜色	##ff	否
content	在方法内定义的内容	null	否,如果传值则优先级小于tooltips的内容
selfShadow	弹出窗阴影	0 0 9px 3px #ccc	否

结束语

奋战了两天终于开发完成，以后直接使用，方便了很多。

使用jquery开发一个弹出框组件
前言最近呢接手一个很古老的项目，就是没有用任何Ui框架的那种，正好要开发一个气泡弹出窗，心里一想是不是可以开发一...
Bootstrap - 弹出框制作
弹出框（模态框）Modal.弹出框是一个经常使用的组件，一般用于弹出提示信息，确认信息，表单等内容。代码：解析...
做一个复用的开发组件 modal弹出框
使用弹出框组件弹出modal22
Vant中Popover气泡弹出框位置错乱问题解决
在使用 VantUI 开发 H5 应用时，引入了 Popover 气泡弹出框组件，其中弹出位置参数设置的是 pla...
vue-弹出框组件
创建一个公用的弹出框组件，包括消息弹出框，确认弹出框，自定义内容弹出框一、创建 1、创建一个基础弹出框：dial...
解决 ng-zorro-antd 升级后 [Modal对话框]
问题概述 ng-zorro-antd ver 0.6.x 版本使用自动组件创建 Modal 弹出框时，在弹出框与页...
灯箱效果插件Magnific Popup详解
Magnific Popup 是一个非常优秀的弹出对话框或者灯箱效果插件。它基于jQuery（zepto）开发，使...
Avoid mutating a prop directly s
Vue项目中，使用Element-UI Dialog对话框组件，关闭弹框时弹出如下警告：意思是子组件dialog...
Flutter开发 - 今日遇到的问题
问题1 当我们使用Scaffold组件作为页面根组件时，页面上若有TextField输入框,底部有子组件，点击弹出...
iVIew对话框封装
弹出框使用率较高，将其封装为组件 @/components/tip-modal/index.vue: 对比查看使用：